2015-01-17 3 views
0
<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 회). 그러면 Itemname이 오른쪽에 붙어 나타나고 사라집니다. 나는 Jquery에서 초보자입니다.이 문제를 해결할 수있는 솔루션은 높이 평가 될 것입니다.몇 시간 만 지나면 Jquery 효과가 작동하지 않습니다.

답변

0

두 번째 이벤트 첨부 파일이 첫 번째 이벤트 첨부 파일 안에 있고 대괄호가 잘못된 라인에서 닫힙니다.

$(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); 
    }); 
}); 
0

당신은 mouseleave

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

    }); 
}); 
사용 mouseover 이벤트 핸들러 핸들러를 바인드해야합니다 : 그것은 각각의 이벤트 첨부 파일이 독립적 인 확인을 재구성