0

ポップアップを表示したい。ユーザーがリンクをクリックすると、ポップアップがアニメーションで表示されます。わずかに左側にアニメーション化され、両方同時にフェードインされます。私の現在のコードは少し左に向かってアニメーション化しますが、フェードインは機能しません。ここに私のjqueryコードがあります

showpopup : function (e) {
        e.preventDefault();
        var continent = $(this).attr('rel'),
            pop       = $('<div></div>').addClass('popup').html(continent);

            pop.insertAfter('#continents').stop().animate({'left': '550px'},100);
            pop.fadeIn();
    }

ここにポップ用の私のCSSがあります

.popup {
width: 300px; height: 200px;
position: absolute;
left: 580px;
top: 40px;
padding: 5px; background: #ccc;
border-radius: 5px;
z-index: 100;
border: 1px solid #ccc;
}
4

2 に答える 2

1

あなたのコードに基づいて、実際の例を使用して Fiddle を作成しました。

大事な事：

pop.animate({'left': '550px', 'opacity': 1}, 500);

これにより、「左」プロパティのフェードとアニメーション化が同時に行われます。

于 2012-09-21T08:45:39.060 に答える
0

ポップアップを機能させるには、ポップアップを非表示にする必要があると思いますfadeIn。hide()DOM に追加する前に呼び出しを追加してみてください。

showpopup : function (e) {
        e.preventDefault();
        var continent = $(this).attr('rel'),
            pop       = $('<div></div>').addClass('popup').html(continent);

            pop.hide().insertAfter('#continents').stop().animate({'left': '550px'},100);
            pop.fadeIn();
    }

display: none;またはあなたのcssに追加してください：

.popup {
display: none;
width: 300px; height: 200px;
position: absolute;
left: 580px;
top: 40px;
padding: 5px; background: #ccc;
border-radius: 5px;
z-index: 100;
border: 1px solid #ccc;
}
于 2012-09-21T08:42:54.477 に答える