用鼠標懸停動畫重複jQuery

我的jQuery動畫不斷重複。它移出鼠標區域，因此觸發鼠標離開。如果您稍後移動一下鼠標，則它會後退，然後觸發鼠標懸停。這樣它不斷重複。我該如何解決這個問題。用鼠標懸停動畫重複jQuery

這是我的HTML：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title></title> 

     <link rel="stylesheet" type="text/css" href="stylesheet.css"> 


     <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> 
     <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
     <script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script> 
     <script type="text/javascript" src="script.js"></script> 

    </head> 

    <body> 
     <div id="background"> 
      <div id="upperaccent"></div> 
      <div id="bottomaccent"></div> 
      <div id="leftaccent"></div> 
      <div id="rightaccent"></div> 
     </div> 
      <div id="leftmenu"> 

       <a href="list.html"> 
        <div class="icontext" id="icontext1" style="margin-top: 150px;"> 
         <img class="menuicons" id="menuicon1" src="list.png"> 
        </div> 
        <p class="tags" style="top: 150px;" id="tag1">Tasks</p> 
       </a> 

       <a href="calender.html"> 
        <div class="icontext" id="icontext2"> 
         <img class="menuicons" id="menuicon2" src="calender.png"> 
        </div> 
        <p class="tags" style="top: 239px;" id="tag2">Calender</p> 
       </a> 

       <a href="settings.html"> 
        <div class="icontext" id="icontext3"> 
         <img class="menuicons" id="menuicon3" src="settings.png"> 
        </div> 
        <p class="tags" style="top: 328px;" id="tag3">Settings</p> 
       </a> 

      </div> 

     <div id="topmenu"></div>   
    </body> 
</html>

這是我的CSS：

body, html { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

/* background */ 

#background { 
    background-color: #C5EFFD; 
    width: 100%; 
    height: 100%; 
    z-index: -2; 
    position: absolute; 
} 


/* menu's */ 

#leftmenu { 
    position: absolute; 
    z-index: 2; 

    height: 100%; 
    width: 85px; 
    background-color: #006295; 
} 

#topmenu { 
    position: absolute; 
    z-index: 1; 

    width: 100%; 
    height: 7.5%; 
    background-color: #BD2031; 
    border-bottom-right-radius: 25px; 
} 

.panel { 
    width: 65%; 
    height: 92.5%; 
    background-color: #9BE1FB; 
    left: 85px; 
    top: 7.5%; 
    position: absolute; 
    border-bottom-right-radius: 15px; 
} 

#leftBar { 
    width: 100px; 
    height: 100%; 
    background-color: #006295; 
    opacity: 0.25; 
} 

/* images */ 

.menuicons { 
    width: 64px; 
    height: 64px; 
} 

.icontext { 
    width: 64px; 
    height: 64px; 
    margin-top: 25px; 
    margin-left: 5px; 
} 

.tags { 
    font-size: 20px; 
    color: #231F20; 
    left: 75px; 
    width: 75px; 
    height: 25px; 
    background-color: #0073af; 
    text-align: center; 
    border-radius: 5px; 
    border: 2px solid #0082af; 
    position: absolute; 
} 

/* Calender */

，這是我的jQuery：

$(document).ready(function() { 
    $("#tag1, #tag2, #tag3").hide(); 


    $("#menuicon1").mouseover(function() { 
     $(this).transition({ scale: 1.50, x: 25, rotateY: '360deg'}) 
     $("#icontext1").transition({x: 50}) 
     $("#tag1").show() 
     $("#tag1").transition({x: 120});   
    }); 
    $("#menuicon1").mouseleave(function() { 
     $(this).transition({ scale: 1.00, x: 0, rotateY: '0deg'}) 
     $("#icontext1").transition({x: 00}) 
     $("#tag1").transition({x: 0}) 
     $("#tag1").hide(50);  
    }); 

    $("#menuicon2").mouseover(function() { 
     $(this).transition({ scale: 1.50, x: 25, rotateY: '360deg'}) 
     $("#icontext2").transition({x: 50}) 
     $("#tag2").show() 
     $("#tag2").transition({x: 120});       
    }); 
    $("#menuicon2").mouseleave(function() { 
     $(this).transition({ scale: 1.00, x: 0, rotateY: '0deg'}) 
     $("#icontext2").transition({x: 00}) 
     $("#tag2").transition({x: 0}) 
     $("#tag2").hide(50);   
    }); 

    $("#menuicon3").mouseover(function() { 
     $(this).transition({ scale: 1.50, x: 25, rotateY: '360deg'}) 
     $("#icontext3").transition({x: 50}) 
     $("#tag3").show() 
     $("#tag3").transition({x: 120});      
    }); 
    $("#menuicon3").mouseleave(function() { 
     $(this).transition({ scale: 1.00, x: 0, rotateY: '0deg'}) 
     $("#icontext3").transition({x: 00}) 
     $("#tag3").transition({x: 0}) 
     $("#tag3").hide(50);   
    }); 

});

的工作示例用的jsfiddle：http://jsfiddle.net/hypertje/LUE5b/

來源

2013-08-02 Bart

你的問題是，鼠標懸停做什麼它應該做的？那麼，當你的鼠標離開，然後再次進入時，它會再次運行？這是你的問題嗎？ – user1477388

是的。它會自動再次觸發，這使得點擊圖標鏈接幾乎是不可能的。 – Bart

你沒有發佈你的jsFiddle，這樣可以幫助我幫助你。幫助我幫助你！ :) – user1477388

試試這個關於大小：

http://jsfiddle.net/LUE5b/2/

$(document).ready(function() { 
    $(".tags").hide(); 

    $(".menuicons").mouseover(function() { 

     if (!$(this).hasClass('current')) 
     { 
      $('.current').removeClass('current'); 

      $(this).transition({ scale: 1.50, x: 25, rotateY: '360deg'}) 
      $(this).parent().transition({x: 50}) 
      $(this).parent().parent().find('.tags').show() 
      $(this).parent().parent().find('.tags').transition({x: 120}); 
      $(this).addClass('current'); 

      $.each($('.menuicons'), function(){ 
       if (!$(this).hasClass('current')) 
       { 
        $(this).transition({ scale: 1.00, x: 0, rotateY: '0deg'}); 
        $(this).parent().transition({x: 00}); 
        $(this).parent().parent().find('.tags').transition({x: 0}); 
        $(this).parent().parent().find('.tags').hide(50); 
       } 
      }); 
     } 

    }); 

});

來源

2013-08-02 15:34:11 user1477388

這是完美的，但只是一個問題。是否應該放大一個圖標，或者當您忙於其他地方的某個地方時，是否可以放大圖標？ – Bart

您能否介紹一下不同的內容或者爲什麼這會起作用？ – xdumaine

@roviuser我包含了說這一切的jsfiddle，不是？基本上，這是OP所描述的他想要的。 – user1477388

使用的mouseenter代替鼠標懸停

來源

2013-08-02 15:08:03 Lwyrn

這沒有任何區別，對不起。 – Bart

用鼠標懸停動畫重複jQuery

回答

相關問題