几次后jquery效果不起作用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script>  
$(document).ready(function(){ 
    $(this).find(".itemname").hide(); 
     $(".productborder").mouseover(function(){ 
    $(this).find(".itemname").animate({right:'160px'},"fast"); 
    $(this).find(".itemname").show(); 

$(".productborder").mouseleave(function(){ 
$(this).find(".itemname").animate({right:'0px'},"fast"); 
$(".itemname").fadeOut(300); 
    }); 

    }); 

}); 
</script> 
<html> 
<div class="productborder"> 
    <p class="itemname"> Hello World </p> 
    <img src="images/1.jpg" class="img-responsive center-block" alt="wallet" /> 
</div> <!-- end of productborder --> 
</html>

这是我的jquery和HTML，jquery悬停效果在前几次完美运行，比如说4/5次。然后，产品名称卡在右侧并出现并消失。我是Jquery的新手，解决这个问题的任何解决方案都将受到高度赞赏。几次后jquery效果不起作用

来源

2015-01-17 Nazmul

您的第二个事件附件位于第一个附件内，您的括号在错误的行上关闭。重新组织，使其所以每个事件附件是独立的：

$(document).ready(function(){ 
    $(this).find(".itemname").hide(); 
    $(".productborder").mouseover(function(){ 
     $(this).find(".itemname").animate({right:'160px'},"fast"); 
     $(this).find(".itemname").show(); 
    }); 
    $(".productborder").mouseleave(function(){ 
     $(this).find(".itemname").animate({right:'0px'},"fast"); 
     $(".itemname").fadeOut(300); 
    }); 
});

来源

2015-01-17 16:33:57

您需要绑定mouseover事件处理程序处理程序mouseleave

使用

$(document).ready(function() { 
    // You need to use .productborder selector instead of this 
    $(".productborder").find(".itemname").hide(); 
    $(".productborder").mouseover(function() { 
    }); 
    $(".productborder").mouseleave(function() { 

    }); 
});

来源

2015-01-17 16:34:20 Satpal

几次后jquery效果不起作用

回答

相关问题