Повторяющийся jQuery с анимацией mouseover

Моя анимация jQuery продолжает повторяться. Он перемещается из области мыши, поэтому мышь запускается. Если вы немного переместите мышь, то она вернется, затем начнется наведение мыши. Таким образом, он продолжает повторяться. Как я могу исправить эту проблему.Повторяющийся jQuery с анимацией mouseover

Это мой 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

Ваша проблема заключается в том, что Mouseover делает то, что он должен делать? В этом случае, когда ваша мышь уходит, а затем снова вводится, она снова запускается? Это твоя проблема? – 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 с анимацией mouseover

ответ

Смежные вопросы