1

ここにjQueryアニメーションの例があります：http ：//jsfiddle.net/p7Eta/

マウスがコンテナdiv内にまったくない場合は、すべてのタイトルをポップアウトしたいと思います。私は次のようなことをしようとしました：

$("#container").mouseout(

     function() {
    //slides spans up
    $('.popup').stop().animate({
        bottom: 0 + 'px'
    });

});

ただし、以前のアニメーションでは機能しません。この効果を達成するための正しい方法は何ですか？

編集：私はこれに似たものが欲しいです：http：//jsfiddle.net/RE3XK/しかし、マウスオーバーで、最初の例のように個々のスパンタイトルをすべて消すのではなくポップアップさせたいです

4

5 に答える 5

2

あなたはこのように意味します。

動作例を確認してくださいhttp://jsfiddle.net/p7Eta/8/

アップデート

$("#slider div.popup").hover(
function() {

    //slides spans up
    $('span', this).animate({
        bottom: 0 + 'px'
    });
}, function() {

    //slides spans down
    $('span', this).animate({
        bottom: '-' + 200 + 'px'
    });
});

$(document).mouseover(
function(e) {
    e.stopPropagation()
    $('#slider div.popup').find(' span').animate({
        bottom: 0
    });
});
于 2011-04-11T20:52:27.870 に答える
1

私の推測では、あなたはこれに沿って何かをしようとしていると思います、私は正しいですか？私が試した方法の唯一の問題は、入力している要素も下にスライドすることです（そうすべきではないと思います）。

于 2011-04-11T21:05:16.460 に答える
1

最後に、jsFiddle が協力してくれました...

私はハックなことをしていますが、それを機能させる唯一の方法です。.hover私のコードはそれなしでは正しく動作しないため、現在ホバーされている要素にクラスを追加する必要がありました。コードを見ないでください。見栄えがします。

これが実際の例です：http://jsfiddle.net/p7Eta/41/

そしてコード：

// JavaScript Document

//When div.popup is moused over moused over
$("#slider div.block").hover(

function() {

    //slides spans up
    $(this).addClass('hovered');
    $(this).find('span').stop().animate({
        bottom: '0px'
    });
}, function() {
$(this).removeClass('hovered');
    //slides spans down
    $(this).find('span').stop().animate({
        bottom: '-200px'
    });
});

$('#container').hover(function() {
    $('#slider div.block:not(.hovered) span').animate({
        bottom: '-200px'
    });
}, function() {
    $('#slider div.block span').stop().animate({
        bottom: '0px'
    });
});
于 2011-04-11T21:16:09.243 に答える
0

または、このようなもの...実際にアニメーションを停止してからリセットします。http://jsfiddle.net/NDtMW/

于 2011-04-11T20:57:50.953 に答える
-1

何を求めているのかを明確にしてください。あなたは

  • アニメーションを継続的に動かして、ホバーされていないときは常に動き続けるようにしたいですか？
  • ホバーされていないときはいつでもモーションアップ状態にしたいですか？

ところで、元のスクリプトはIEでのみ機能します。1つのブラウザのみを使用する場合は、今後そのように言ってください。IEユーザーはおそらくSOの少数派です。

于 2011-04-11T21:26:22.933 に答える