Question

当我点击这个小提琴上的“加载更多”按钮时，如何在新div上添加淡入效果（慢慢降低效果）？

$(function(){
    $("div").slice(0, 10).show(1); // select the first ten
    $("#load").click(function(e){ // click event for load more
        e.preventDefault();
        $("div:hidden").slice(0, 10).show(200); // select next 10 hidden divs and show them
        if($("div:hidden").length == 0){ // check if any hidden divs still exist
            alert("No more divs"); // alert if there are none left
        }
    });
});

Answer 1

使用.fadeIn()或.slideDown()

$("div:hidden").slice(0, 10).fadeIn();//or .slideDown();

Fiddle Demo 或 Fiddle Demo

Answer 2

您可以使用.slideDown并以毫秒为单位传递时间。

$("div:hidden").slice(0, 10).slideDown(1000);

<强> Js Fiddle Demo

Answer 3

将fadeIn与slow一起用作第一个参数：

$("div:hidden").slice(0, 10).fadeIn('slow');

Demo

jQuery fadeIn Documentation

现在我读了slowly coming down effect，所以我想也许你不想要fadeIn效果，而是slideDown效果？好吧，jQuery也有这个功能：

$("div:hidden").slice(0, 10).slideDown('slow');

再次以slow作为第一个参数。

Demo

Documentation on slideDown

你甚至可以同时做到这些：

$("div:hidden").slice(0, 10)
    .css('opacity', 0)
    .slideDown('slow')
    .animate({
    opacity: 1
}, {
    queue: false,
    duration: 'slow'
});

Demo

如何用jquery淡化div？

3 个答案: