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 上加载了两个带有淡入淡出效果的外部页面。为了让 div#result 在第二次点击/加载时显示渐变效果，我添加了 [$("#fade").fadeOut('slow');]。

但是，这会导致加载的页面首先显示 & 淡出 & in。我尝试更改 [$("#fade").fadeOut('slow');] 的顺序，但结果相同。

我确信有一种方法可以正确地做到这一点，但我对 jQuery 的理解还不够，无法达到预期的效果。

任何人都可以帮忙吗？有什么建议吗？应该怎么改写？

4

5 回答 5

1

可能你想要一个淡入淡出：

$("#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

我真的在这里在黑暗中拍摄，因为你的问题有点不清楚，但似乎一个简单的 fadeToggle 实现可以解决这个问题。

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

我假设您希望当您单击链接时，它应该调用服务器，获取数据，用数据填充匹配的元素，然后将该元素淡入视图。然后再次单击时，您希望它使元素淡出视图。如果是这种情况，上面的代码将起作用，但要确保 #result div 不会从一开始就显示出来，您需要将其设置为 display:none 在 css 中。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 回答
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 回答