1 
$(".link").click(function (e) {
     e.preventDefault();      
    var $urlToLoad = $(this).attr('href');  
    $('#result').load($urlToLoad, function(data){

        $("#fade").fadeOut('slow'); //added to show fade effect on second click
        $("#fade").fadeIn('slow');

    });      
});

基本的に、フェード効果のある.clickでロードする2つの外部ページがあります。div#result が 2 回目のクリック/読み込みでフェード効果を表示するために、[$("#fade").fadeOut('slow');] を追加しました。

[$("#fade").fadeOut('slow');] の順序を変更しようとしましたが、同じ結果になりました。

これを正しい方法で行う方法があると確信していますが、目的の効果を達成するのに十分なjQueryの理解がありません。

誰でも助けることができますか？なにか提案を？どのように書き換えるべきですか？

4

5 に答える 5

1

あなたはfadeToggleが欲しいかもしれません:

$("#fade").fadeToggle('slow');

また

$("#fade").fadeOut('slow').fadeIn('slow');

またはこれは役に立つかもしれません：

$("#fade").hide().fadeIn('slow');
于 2013-03-20T18:57:54.723 に答える
1

使ってみてはどうですか...

$("#fade").hide().fadeIn('slow');
于 2013-03-20T19:00:48.197 に答える
0

ドキュメントの読み込み時に関数をトリガーし、無限に実行させます。

http://jsfiddle.net/WvpVK/

したことは、

ステップを形成します。

1- トリガーごとに URL を変更します
。2- 特定の時間経過後に変更をトリガーします
。 3- 次の img の URL を再度変更します。

/*---------------------------------------------------------------------------*/
<br><Br>
imgcnt=1;

function chngimg(){

if(imgcnt<5){


    imgcnt = imgcnt + 1;
        /*newvar = chngimg(imgcnt);*/
        //alert(newvar);

       // alert(imgcnt);

newvar = 'http://www.buzzle.com/images/cliparts/numbers/'+imgcnt+'.png';
    $( "#transit" ).fadeOut(1500,
        function(){ $( "#transit" ).attr({  src: newvar,  title: "Banner", alt: "Halloween"});$( "#transit" ).fadeIn(1500);
                });
    }
    else{imgcnt=0;}
}
$(document).ready(function(){

/**increament value, after 3-4 sec
setInterval, call function to increament,
send increased value to string and change image
after it reaches the last img, 
reset the counter.**/

setInterval(function() {
    chngimg();
},4000);

});

/*---------------------------------------------------------------------------*/
<br><Br>

それが私のイメージ

それが私のイメージ

**配列を使用して同様のことができます。

于 2013-10-18T10:23:08.053 に答える
0

あなたの質問は少し不明確なので、私は本当にここで暗闇の中でショットを撮っていますが、fadeToggleの簡単な実装がこれを解決するようです.

$(".link").click(function (e) {
    e.preventDefault();      
    var $urlToLoad = $(this).attr('href');  
    $('#result').load($urlToLoad, function(data){
        $("#fade").fadeToggle('slow');
    });      
});

リンクをクリックすると、サーバーが呼び出され、データが取得され、一致する要素がデータで埋められ、要素がフェードインされます。次に、もう一度クリックすると、要素がフェードアウトします。この場合、上記のコードは機能しますが、最初から #result div が表示されないようにするには、css で display:none に設定する必要があります。残りはfadetoggleが処理します。

于 2013-03-20T18:58:55.410 に答える
0

私が理解しているのは、フェードアウェイ#fade したいということです。コンテンツをロードするとフェードインしますよね？

$(".link").click(function (e) {
    e.preventDefault();
    var $urlToLoad = $(this).attr('href');

    if ($("#fade").length) {
        $("#fade").fadeOut('slow', function () {
            loadContent($urlToLoad)
        });
    } else {
        loadContent($urlToLoad)
    }

});

function loadContent(url) {
    $('#result').load(url, function (data) {
        $("#fade").fadeIn('slow');
    });
}
于 2013-03-20T18:59:10.493 に答える