Jquery: Hover Schieber Registerkarte Mechanismus

Ich arbeite derzeit mit Schiebereglern. Ich implementiere die Hover-Funktion, um die Registerkarte zum Verschieben nach links zu triggern. Die einzige Sache ist, dass die Registerkarte gleitet, wenn die Maus es schwebt, aber es schließt sofort. Ich möchte, dass die Registerkarte geöffnet bleibt, sobald Sie die Maus darüber bewegen, und Sie können die Registerkarte nur schließen, indem Sie auf den ursprünglichen "Pfeil" div klicken. Hier ist eine Demo meiner Arbeit: http://jsfiddle.net/eMsQr/6/Jquery: Hover Schieber Registerkarte Mechanismus

<script language="javascript"> 
    $(document).ready(function() { 
    $("#arrow").hover(
    function(){ 
     $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500); 
    }, 
    function(){ 
     $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500); 
    } 
); 
}); 
</script> 

<html> 
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;"> 
    <div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div> 

    <div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div> 
</div> 
</html>

Quelle

2012-03-24 CodingWonders90

http://jsfiddle.net/eMsQr/13/ tut diese Hilfe – Rafay

Sie das bedeuten? Verwenden Sie mouseenter - und click -event:

$(document).ready(function() { 
    $("#arrow") 
    .mouseenter(function(){ 
     $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500); 
    }) 
    .click(function(){ 
     $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500); 
    }); 
});

Auch this example sehen.

Quelle

2012-03-24 15:53:23 scessor

Danke, .mouseenter war der Hauptschlüssel, der das Problem löste. – CodingWonders90

$(document).ready(function() { 
    $("#arrow").hover(function(){ 
     $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500); 
    }, 
    function(){}); 
}); 


$("#arrow").click(function(e){ 
    $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500); 
});

Eine Geige ist here.

Quelle

2012-03-24 15:55:24

Jquery: Hover Schieber Registerkarte Mechanismus

Antwort

Verwandte Themen