Question

$(".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'）;]。

然而，这导致加载的页面显示第一个＆amp;淡出＆amp; amp; in。我尝试更改[$（“#fade”）的oder .fadeOut（'slow'）;]但结果相同。

我确信有一种方法可以正确的方式执行此操作，但我对jQuery没有足够的了解以达到预期的效果。

有人可以帮忙吗？有什么建议吗？怎么改写？

Answer 1

可能你想要一个fadeToggle：

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

或

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

或者这可能有用：

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

Answer 2

如何使用......

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

Answer 3

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

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

我假设你想要在你点击链接时，它应该调用服务器，获取数据，用数据填充匹配元素，然后将元素淡入视图。再次单击时，您希望它将元素淡出视图。如果是这种情况，上面的代码将起作用，但为了确保#result div不会从get get出现，你需要将它设置为在css中显示：none。 fadetoggle会照顾其余的。

Answer 4

我明白你想要fadeAway #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');
    });
}

Answer 5

在doc load上触发函数，让它无休止地运行。

http://jsfiddle.net/WvpVK/

做了什么，

形成步骤：

1-更改每个触发器上的URL，
2-在特定的时间计数后触发更改
3-再次为下一个img更改网址。

/*---------------------------------------------------------------------------*/
<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>

这就是我的形象

Thats my image

**在数组的帮助下可以做类似的事情。

jQuery fadeIn＆amp; fadeOut onload：还有更好的方法吗？

5 个答案: