向ajax添加動畫

嗨我試圖添加淡入/淡出或滑動到.load的動畫。我附加了一個基本結構的小提琴，但首先我的ajax調用不是在小提琴上工作（我嘗試了完整的url），但他們在測試網站上工作。向ajax添加動畫

我試着在函數的末尾添加.fade（），但這似乎不起作用。

有沒有人有任何想法？

  $(".vCard").click(function(){ 
       $("#mainContent").load("ajax/vCard.php").fade(); 
      });

http://jsfiddle.net/craigie2204/mhUx7/

來源

2013-10-21 craigie2204

如果你想模仿的jsfiddle Ajax調用，您將需要修改自己的網址指向的jsfiddle自己。看到這裏：http://doc.jsfiddle.net/use/echo.html – FixMaker

你可以做一兩件事只是.hide()它首先然後添加.fadeIn()：

更改爲t他：

$("#mainContent").load("ajax/vCard.php").hide().fadeIn();

或更好地與css隱藏它，只是添加.fadeIn()：

CSS：

#mainContent{ 
    display:none; 
}

的jQuery：

$("#mainContent").load("ajax/vCard.php").fadeIn();

但是你必須在jQuery中的方法回調處理程序中要做到：

$("#mainContent").load("ajax/vCard.php", function(){ 
    $(this).fadeIn(); // this will be animated when load gets completed. 
});

來源

2013-10-21 09:29:18 Jai

這個工作中，我是一個白癡 – craigie2204

如果load（）產生一個異步請求，它怎麼能工作？'fadeIn（）'調用應該被設置爲'load（）'函數的回調。這裏的文檔是http://api.jquery.com/load/。如果你在本地環境中嘗試，響應可能非常快，似乎工作，因爲'fadeIn（）'函數的延遲給你的錯覺，它是在內容加載後觸發的，但事實並非如此。 – marquez

@marquez你是對的，這應該完全按照你的建議來完成，在我看來，對於我來說，op可能正在做這樣的事情，無論如何，這應該按照你的建議來完成，我只是更新了答案。 – Jai

嘗試.fadeIn(1500)

這應該工作

資源

where do i put jQuery .fade() function in ajax success callback?

http://api.jquery.com/fadeIn/

來源

2013-10-21 09:18:50

嗨，謝謝我試過這個，但我認爲，因爲它是加載之前它加載的異步Ajax頁面和動畫已經完成 – craigie2204

使用在另一個答案中提供的ajax上的'.success'與'fadeIn'結合使用 –

感謝您的回覆，但這不起作用。我沒有得到JavaScript錯誤，但動畫無法正常工作。 – craigie2204

$(".vCard").click(function(){ 
    var _div = $("#mainContent"); 
    _div.load("ajax/vCard.php",function(){ 
     _div.fade(); 
    }); 
    });

塊引用

來源

2013-10-21 09:21:24

感謝您的回覆，但這不起作用。我沒有得到JavaScript錯誤，但動畫無法正常工作。 – craigie2204

你應該使用AJAX功能，這樣你就可以使用不同的statut，如：

$.ajax({ 
    type: "GET", 
    url: url, //Set you url here 
    data: getData, 
    dataType: "html", 
    success: function(data) { 
     $(this).fadeIn(400); //When you loaded your ajax page, Fade In to show. If you want to parse what you get use '.html(data)' 
    } 
});

來源

2013-10-21 09:23:53 H4mm3R

這是否進入.click功能？ – craigie2204

是的！你可以把這個函數放在你的點擊 – H4mm3R

向ajax添加動畫

回答

相關問題