2

シンプルなホバー アニメーションがあります。私は、 mouseenterとmouseleave関数を分離して、mouseleave の条件を定義しました。その条件が真である場合。mouseleave 機能を無効にしますが、この条件が機能しません。javascript は私の条件を無視し、mouseleave 関数を実行します。

ここにjsFiddleがあります。

jQuery:

$('.bigBox').mouseenter(function() {
    $('.trigger').stop().animate({'left':'-50px'},222);
    $('.bigBox').stop().animate({'left':'-1px'},222);
});


var holdCondition = $('#hold').hasClass('selected');
//tried to disable mouseleave here but didnt work

if ( !holdCondition ) {//if #hold has not class selected
    $('.bigBox').mouseleave(function() {
        $('.trigger').stop().animate({'left':'-1px'},222);
        $('.bigBox').stop().animate({'left':'-111px'},222);
    });
}


$('.option').click(function(){
    $('.option').removeClass('selected');
    $(this).addClass('selected');
});

html:

<div class="bigBox">
   <span class="trigger">X</span>

   <span class="option selected">A</span>
   <span class="option">B</span>
   <span id="hold" class="option">Hold</span>
</div>

CSS:

.bigBox {
    position:fixed; top:10%; width:100px; height: 20px; 
    left:-111px;  border:1px solid #000; padding-left:5px;
}
.trigger { 
    position:fixed; top:10%; width:20px; height: 20px; 
    left:-1px; border:1px solid #000; text-align:right; padding-right:5px;
}
.option { margin:0 5px; cursor:pointer; }
.selected { color:#f00; }

</p>

4

2 に答える 2

3

あなたholdConditionは一度だけ実行する代わりに、毎回チェックする必要があります.mouseleave()。これを試して。

ここにjsFiddleがあります。

   $('.bigBox').mouseleave(function() {
        var holdCondition = $('#hold').hasClass('selected');

        if ( !holdCondition ) {//if #hold has not class selected
          $('.trigger').stop().animate({'left':'-1px'},222);
          $('.bigBox').stop().animate({'left':'-111px'},222);
        }
    });
于 2012-07-28T19:01:37.777 に答える
0

ID「hold」の要素に「selected」が適用されるのはいつですか? 必ずしもページロードではなく、ユーザーの操作で発生すると思われますか?

あなたがこれを書いた方法：

if ( !holdCondition ) {//if #hold has not class selected
    $('.bigBox').mouseleave(function() {

holdCondition でない場合、マウスリーブは pageload で定義されます。

あなたが望むのは、mouseleave 内の !holdCondition をチェックすることです:

$('.bigBox').mouseleave(function() {
    if ( !holdCondition ){
        $('.trigger').stop().animate({'left':'-1px'},222);
        $('.bigBox').stop().animate({'left':'-111px'},222);
    }
});
于 2012-07-28T18:59:47.960 に答える