JQuery Maus über div slideUp und Maus aus div slidedown

StackOverflow https://stackoverflow.com/questions/3654829

Frage

Hier ist mein Code http://jsfiddle.net/AB6J3/7/ Sie können sehen, zu bearbeiten, etc.

Wenn ich über roten Rand Box rollen, sollte die Orange Box nach oben schieben und Maus sollten sie nach unten rutschen. es funktioniert gut für die andere Art und Weise, aber wenn ich zu slideUp slidedown ändern, es funktioniert nicht: /? Was bin ich

Appreciate hilft. 

<!DOCTYPE html>
<html>
<head>
  <style>
div#monster { background:#de9a44; margin:3px; width:80px; height:40px; display:none; float:left; position:absolute; right:10px; top:0; }

#clickk {width:40px; height:40px; background:#ccc; position:absolute; top:0; right:10px;}
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div style="width:550px; padding:40px 0 0;margin:0 auto; border:1px solid #111; position:relative;">    
    <div id="monster"></div>
    <div id="clickk"></div><br />
    <div style="width:500px; height:300px; background-color:#ccc; margin:0 auto;"></div>
</div>

<script>
$("#clickk").hover(function () {
    if ($("#monster").is(":hidden")) {
        $("#monster").slideDown("fast");
    } else {
        $("#monster").slideUp("fast");
    }
});

</script>

</body>
</html>​
War es hilfreich?

Lösung

Ich glaube, du bist besser mit einigen CSS zwickt hier, wie diese aus: 

#monster { 
    background:#de9a44;
    width:80px; 
    height:60px; 
    display:none; 
    position:absolute;
    left: 0;
    bottom: 0;
}

#clickk {
    width:80px; 
    height:60px; 
    border:1px solid #cc0001; 
    background:transparent; 
    position:absolute; 
    top:0; 
    right:10px;
}

Dann jQuery wie folgt aus: 

$("#clickk").hover(function () {
  $("#monster").slideToggle("fast");
});​

Sie können es testen hier aus.     

Andere Tipps

Sie sollten versuchen Sie Folgendes: 

$("#clickk").hover(function () {
    $("#monster").slideUp("fast");
}, function() {
    $("#monster").slideDown("fast");
});

Das zweite Argument für .hover() ist die mouseout-Funktion.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top