jQuery fadeIn & fadeOut onload: есть ли лучший способ?

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 # показал эффект затухания при втором щелчке/загрузке, я добавил [$ ("# fade"). FadeOut ('slow');].

Однако, это приводит к загруженной странице показывает первый & затухает & в Я попытался изменить Одер из [$ («# замирания») Затухание («медленного»);.]., Но тот же результат.

Я уверен, что есть способ сделать это правильно, но у меня недостаточно понимания jQuery для достижения желаемого эффекта.

Может ли кто-нибудь помочь? Любое предложение? Как его переписать?

Answer 1

Может быть, вы хотите fadeToggle:

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

или

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

или это может быть полезно:

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

Answer 2

им действительно принимая выстрел в темноте здесь, потому что вы Вопрос немного неясен, но похоже, что простая реализация fadeToggle решила бы это.

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

им если вы хотите, чтобы при нажатии на ссылку, он должен сделать вызов на сервер, получить данные, заполнить соответствующий элемент с данными, а затем исчезать элемент в поле зрения. то при повторном нажатии вы хотите, чтобы элемент исчез из поля зрения. Если это так, приведенный выше код будет работать, но чтобы убедиться, что #result div не будет отображаться из get go, вам нужно установить его для отображения: none в css. fadetoggle позаботится обо всем остальном.

Answer 3

Что я понял, вы хотите, чтобы 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 4

Как об использовании ...

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

Answer 5

triggerring функцию на док нагрузки, и позволяя ему работать бесконечно.

http://jsfiddle.net/WvpVK/

Что есть

образуют этапы:

1- изменить URL-адрес на каждом триггере,
2 триггерных изменение после определенного кол-во времени
3 - снова измените URL-адрес для следующего 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> 

То мое изображение

** подобная вещь может быть сделано с помощью массива.