1

画像divにカーソルを合わせるとフェードインするキャプション付きのギャラリーがあります。次のステップは、すべてのキャプションを表示するボタンを追加することです。これにより、画面全体にカーソルを移動しなくても、スクロールして読むことができます。

ショーオール関数の作成は簡単ですが、カーソルが写真の上を通過すると、ホバー関数が起動し、その画像のキャプションが消えます。

showallがアクティブなときにshowall機能でホバー機能を無効にする簡単な方法はありますか？

基本的なjqueryコードは次のとおりです。.teaseはキャプションです：

$('.tease').hide();
$('.img33, .img40, .img50, .img60').hover(
    function(){ $(this).children('.tease').fadeIn('900'); },
    function(){ $(this).children('.tease').fadeOut('2500'); }
);

各画像の基本的なHTML：

<div class="img33">
<img src="../dir/someimage.jpg">
<div class="tease">Tease copy</div>
</div>
4

3 に答える 3

3

ホバー関数でチェックするグローバル変数を定義するだけです。

例えば

var hoverEnabled = true;

$('.tease').hide();
$('.img33, .img40, .img50, .img60').hover(
    function(){ if(hoverEnabled) $(this).children('.tease').fadeIn('900'); },
    function(){ if(hoverEnabled) $(this).children('.tease').fadeOut('2500'); }
);

$('#showAllButton').click(function() {
    $('.tease').show();
    hoverEnabled = false;
}

.bind()または、イベント名（hover.showTeaseなど）と.unbind()それをshowall関数で使用して、ホバーイベントをバインドすることもできます。

于 2012-11-13T09:40:27.057 に答える
2

この方法で「ホバー」のバインドを解除できます。

$(this).unbind('mouseenter mouseleave');

ホバーを無効にする場合は、これを実行してください。または、イベントの追加と削除を継続せずに制御を強化するために、追加と削除が行われるクラスを導入し、特定のクラスが要素に設定されている場合にのみホバーアクションを実行することもできます。このような：

$(this).hover(
    function() { 
        if ($(".yourElement").hasClass("allowHover")) { 
            ... 
        }  
    },
    function() { 
        if ($(".yourElement").hasClass("allowHover")) { 
            ... 
        }  
    }
 );

次に、クラスを追加または削除するだけで、ホバーが有効または無効になります。

于 2012-11-13T09:37:58.123 に答える
0 
var allShown = false;

function showAll(){
    //some imaginary code

    //we're showing all
    allShown = true;
}

これは、DOM対応のスコープである必要があります。

$(function(){
   $('.img33, .img40, .img50, .img60').hover(function(){ 
        if(allShown === false){
            $(this).children('.tease').fadeIn('900');
        }
    },function(){  
        if(allShown === false){
            $(this).children('.tease').fadeOut('2500');
        }
    });

    $('ele').on('something', function(){
        //some code..
        allShown = false;
    });

    //some event to fire the showAll function
    $('ele').on('something', function(){
        showAll();
        allShown = true;
    });



});
于 2012-11-13T09:39:36.590 に答える