Question

我在元素Div1上使用悬停显示div +文本。我希望动画只显示一次，而不是每次重复显示鼠标时都不重复。另外，还有一个我可以使用的其他功能，而不是悬停在div进入View时触发动画吗？

$(".div1").hover(function(){
    $(".div2").slideToggle();
    $(".div3").slideUp(300).fadeIn("slow");
    $(".div4").slideUp(300).delay(300).fadeIn("slow");
    $(".divintro").hide();
    $(".divtext1").fadeIn("slow");
    $(".divtext2").fadeIn("slow");
}, function(){});

编辑：我决定采用另一种方式，它或多或少地工作，

if($('#div1').is(':visible')) {
        $(".div2").stop().slideToggle({direction: "up"}, 300).delay(100);
        $(".div3")..delay(200).fadeIn("slow");
        $(".div4")..delay(400).fadeIn("slow");
        $(".divtext1").fadeIn( "slow" );
        $(".divtext2").fadeIn( "slow" );
 }

DIV1在可见时进入视野，但如果我离开该div（在页面上）并返回它，动画再次开始，但DIV3和DIV4不会再次淡入，甚至在DIV2之前也可见切换。有任何想法吗？

Answer 1

您可以尝试stop()功能：

$(".div1").stop().hover(function(){ ....

Answer 2

我能够用

解决这个问题

if($('#div1').is(':visible')) {
//alert("is visible");
$(".div2").slideToggle({direction: "up"}, 300).delay(100);
$(".div3").delay(200).fadeIn("slow");
$(".div4").delay(400).fadeIn("slow");
$(".divtext1").fadeIn( "slow" );
$(".divtext2").fadeIn( "slow" );
stopPropagation();
}else{
//alert("not visible");
$(".div2").slideUp('fast'); 
$(".div3").attr("style", "display:none;");
$(".div4").attr("style", "display:none;");
}

Jquery on Hover停止重复

2 个答案: