Как остановить diagonalFade, если я перемещаю мышь очень быстро? - PullRequest
Новая
       16

Как остановить diagonalFade, если я перемещаю мышь очень быстро?

1 голос
/ 30 июля 2011

У меня есть следующий код, но если я очень быстро перемещаю мышь, изображения по-прежнему постоянно исчезают и исчезают.

stop() работает, если я использую animate(), но когда я использую этот плагин, он не работает. 

$('.person a').live('mouseenter', function() {
    $($(this).children('.overstate')).stop().diagonalFade({
    time: 350,
    fadeDirection_x: 'left-right',
    fadeDirection_y: 'top-bottom',
    fade: 'out'
    });
}).live('mouseleave', function() {
    $($(this).children('.overstate')).stop().diagonalFade({
    time: 350,
    fadeDirection_x: 'left-right',
    fadeDirection_y: 'top-bottom',
    fade: 'in'
    });
});

html 

                <div class="person">
                    <a href="#">
                        <img src="images/p1h.jpg" />
                        <span class="name">Lee</span>
                        <span class="overstate">
                            <img src="images/p1.jpg" />                         
                        </span>
                    </a>
                </div><!--end person-->

css 

.person { float:left; width:180px; margin-bottom:40px; height:236px; margin-right:31px; }
    .lastperson { margin-right:0; }
.person a { display:block; width:180px; height:236px; overflow:hidden; position:relative; }
.person img { position:relative; z-index:2000; }
.name { display:block; width:170px; height:34px; background:url(../images/team-name.png) no-repeat top left; font-size:18px; color:#FFF; text-align:left; line-height:33px; padding-left:10px; float:left; position:relative; z-index:5000;}
.overstate { left:0; top:0; position:absolute; z-index:3000;  }

Я думал, что что-то подобное может работать, но продолжает мигать, если навести курсор мыши на парураз 

$('.person a').live('mouseenter', function() {
  if (!$(this).children('.overstate').hasClass('animated')) {

     $($(this).children('.overstate')).stop().diagonalFade({
     time: 450,
     fadeDirection_x: 'left-right',
     fadeDirection_y: 'top-bottom',
     fade: 'out'
    });

  }
  }).live('mouseleave', function() {
      $($(this).children('.overstate')).addClass('animated').stop().diagonalFade({
      time: 450,
      fadeDirection_x: 'left-right',
      fadeDirection_y: 'top-bottom',
      fade: 'in',
      complete: function() { $('.person a').children('.overstate').removeClass('animated'); }
 });

});

Ответы [ 2 ]

0 голосов
/ 30 июля 2011

Совет jQuery: $($(this).children('.overstate')).stop() является избыточным.Вы можете просто позвонить $(this).children('.overstate').stop().

0 голосов
/ 30 июля 2011

Боюсь, что единственное решение может быть примерно таким: 

    <script>
    var inactive = 1;
    $(document).ready(function(){
        $('.person a').live('mouseenter', function(e) {
            if(inactive==1){
                inactive = 0;
                $($(this).children('.overstate')).stop().diagonalFade({
                time: 350,
                fadeDirection_x: 'left-right',
                fadeDirection_y: 'top-bottom',
                fade: 'out',
                complete:function(){
                    inactive=1; 
                }

                });
            }
        })
        $('.person a').live('mouseleave', function() {

                inactive = 0;
                $($(this).children('.overstate')).stop().diagonalFade({
                time: 350,
                fadeDirection_x: 'left-right',
                fadeDirection_y: 'top-bottom',
                fade: 'in',
                complete: function(){
                inactive=1; 

                }
            });

        });
})

</script>
...