Jquery AJAX-在div更改时平滑地向下滑动按钮_Jquery_Css_Ajax

Jquery AJAX-在div更改时平滑地向下滑动按钮

jquery css ajax

Jquery AJAX-在div更改时平滑地向下滑动按钮,jquery,css,ajax,Jquery,Css,Ajax,我想一按按钮就把它滑下来。我找到了这个jQuery.slideDown（）方法，但无法使其正常工作。我应该在哪里修改 <!DOCTYPE html> <html> <head> <script src='http://code.jquery.com/jquery-2.1.0.min.js'></script> <script> $(document).ready(function () { myIdentifier

我想一按按钮就把它滑下来。我找到了这个jQuery.slideDown（）方法，但无法使其正常工作。我应该在哪里修改

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
<script>
$(document).ready(function () {
    myIdentifier = $.now();
    $.ajax({
        type: "GET",
        url: "http://www.w3schools.com/ajax/cd_catalog.xml?uniq=" + myIdentifier,
        dataType: "xml",
        success: function (xml) {
            $($(xml).find('ARTIST').get().reverse()).slice(0, 3).each(function () {
                artist = ("<p class='artist'>" + $(this).text() + "</p>");
                $(artist).hide().appendTo("#myDiv").fadeIn(1000);
            });
            var ii = 4;
            $('button').click(function () {
                $($(xml).find('ARTIST').get().reverse()).slice(ii, ii + 5).each(function () {
                    artist = ("<p class='artist' style='display:none;'>" + $(this).text() + "</p>");
                    $("#myDiv").append(artist);
                    $('.artist').fadeIn(1000, function () {
                        $(this).css({'visibility':'visible',display:'block'}).slideDown();
                    });

                });
                ii += 5;
            });
        }
    });
});
</script>
</head>
<body>
<div id="myDiv"></div>
<button id="button1" type="button">Show More</button>
</body>
</html>


$（文档）.ready（函数（）{
myIdentifier=$.now（）；
$.ajax({
键入：“获取”，
url:“http://www.w3schools.com/ajax/cd_catalog.xml?uniq=“+myIdentifier，
数据类型：“xml”，
成功：函数（xml）{
$（$（xml）.find（'ARTIST'）.get（）.reverse（））.slice（0,3）.每个（函数（）{
艺术家=（“”+$（this.text（）+“”）；
$（艺术家）.hide（）.appendTo（#myDiv”）.fadeIn（1000）；
});
var ii=4；
$（“按钮”）。单击（函数（）{
$（$（xml）.find（'ARTIST'）.get（）.reverse（））.slice（ii，ii+5）.每个（函数（）{
艺术家=（“”+$（this.text（）+“”）；
$（#myDiv”）.append（艺术家）；
$（'.artist'）.fadeIn（1000，函数（）{
$（this.css（{'visibility'：'visibility'，display:'block}）.slideDown（）；
});
});
ii+=5；
});
}
});
});
显示更多

在您的

.fadeIn

函数中，

$（此）

指的是

$（'.artist'）

。如果要将单击的按钮作为目标，则必须将该按钮存储在变量中，如下所示：

$('button').click(function () {

    clickedBtn = $(this); //save $(this) for later

    //removed some stuff so it's easier to read..
    $('.artist').fadeIn(1000, function () {
        clickedBtn.slideDown(); //slideDown saved element here
    }); 
    //you don't need to set element to visible with css, 
    //slideDown() does this for you
});

您的$（this）位于函数（fadeIn）中，现在$（this）引用元素$（'.artist'），而不是$（'button'）

要解决此问题，需要将其保存在变量中：

$('button').click(function() {
  btnTarget = $(this); // this reference your $('button')
  ...
  $('.artist').fadeIn(1000, function () {
    // look now:
    btnTarget.css({'visibility':'visible',display:'block'}).slideDown();
  });
})

你在做一个fadeIn，然后是一个slideDown？事实上，这并不重要。我只是想拍出一副顺滑的样子。我的意思是，它可以开始滑动，然后淡入…这很重要，因为fadeIn已经将其设置为完全可见和完全高度。因此，slideIn将没有可见的效果。所有这些效果都只是css属性的预定义动画。因此，从hide（）到slideDown（）都可以，但从fadeIn（）到任何其他“show”类型的效果都不会有任何可见的结果。如果您想同时使用这两种效果，那么只需尝试将animate（）直接用于要设置动画的每个属性。这是一个伟大的举动！文本fadeIn丢失。不可能吗？实际上你的主要问题已经在另一个答案中提到了。。现在看看我的答案好吧。再次感谢。

$('button').click(function() {
  btnTarget = $(this); // this reference your $('button')
  ...
  $('.artist').fadeIn(1000, function () {
    // look now:
    btnTarget.css({'visibility':'visible',display:'block'}).slideDown();
  });
})