Javascript 使用jQuery append函数交换带有淡入淡出过渡的元素

我试图使用jquery fadeTo方法作为特定

li

标记的append方法请求之间的转换，我的脚本在鼠标单击id为“viewMore”的div时交换div id“placeholder”中的

li

，但我似乎无法获得正确的函数顺序。发生的情况是，当用户单击“查看更多”时，

li

在淡入淡出之前立即被交换，之后新的

li

淡出，然后新的

li

淡入淡出。有人能帮我调整一下方法的层次结构吗。下面是我的脚本，它循环通过注入JSON数据的

ul

。提前谢谢

编辑：

setTimeOut

是解决这个问题的方法，一个很好的方法。-2014年11月1日下午1:24

    $.getJSON('assets/data/data_001.json', function(data)
    {

      $("#placeholder").html("");
      var ul = $('<ul></ul>');
      $('#placeholder').append(ul);
      var load = $("#imgLd");
      var load2 = $("#titleLd");
      var load3 = $("#priceLd");
      var load4 = $("#descriptionLd");
      var load5 = $("#cartLd");
      $('#cartLd').fadeTo(0,0);

      for(var i in data.items)
      {

        var li = $('<li class=listItem></li>');
        ul.append(li);
        var img = $('<img>');
        img.attr("src", "assets/images/items/" + data.items[i].thumb + ".jpg");
        var title = $("<h3 class=itemTextTitle>" + data.items[i].title + "</h3>");
        var price = $("<h4 class=itemTextPrice>" + data.items[i].price + "</h4>");
        var viewMore = $("<div class=viewMore price=" + data.items[i].price + ">View More</div>");
        viewMore.mousedown((function(x)
        { 

          return function()
          {
            $('#intro').fadeTo(500,0);
            $('#cartLd').delay(750).fadeTo(500,1);
            $('#introBg').delay(500).fadeTo(500,0);
            load.html("<img src=assets/images/items/" + data.items[x].thumb2 + ".jpg>");
            load2.html("<h3 class=itemTextTitle2>" + data.items[x].title + "</h3>");
            load3.html("<h4 class=itemTextPrice>" + data.items[x].price + "</h4>");
            load4.html("<ul class=itemTextDescription>" + 
                            "<li class=itemTextDescription2>" + data.items[x].description.one + "</li>" +
                            "<li>" + data.items[x].description.two + "</li><li>" + data.items[x].description.three + "</li>" + 
                            "</ul>");
            load5.html("<a class=itemCartClick href=#>Add to Cart</a>");
            var priceOutput =" + data.items[x].price + ";

            $('.itemCartClick').on('click', function(){
                alert(JSON.stringify(data.items[x].price));
            });
          }
        })(i));
        li.append(img).append(title).append(price).append(viewMore).append(viewMore);
      }
    });

$.getJSON（'assets/data/data_001.json'，函数（data）
{
$（“#占位符”）.html（“”）；
var ul=$（“
”）；
$（“#占位符”）.append（ul）；
var负载=$（“#imgLd”）；
var load2=$（“#titleLd”）；
var load3=$（“#priceLd”）；
var load4=$（“#说明D”）；
var load5=$（“#cartLd”）；
$（'cartLd'）.fadeTo（0,0）；
for（data.items中的var i）
{
变量li=$（“
”）；
ul.附加（li）；
var img=$（'“+data.items[i].title+”）；
var价格=$（“”+数据项[i]。价格+“”）；
var viewMore=$（“查看更多”）；
viewMore.mousedown（（函数x）
{ 
返回函数（）
{
美元("简介").法德托(500,0),；
美元("cartLd".delay(750),fadeTo(500,1),；
$（'introBg'）.delay（500）。fadeTo（500,0）；
load.html（“”）；
load2.html（“+data.items[x].title+”）；
load3.html（“+data.items[x].price+”）；
load4.html（“
”+
“
”+数据.items[x].description.one+“
”+
“
”+数据.items[x].description.two+”
“+数据.items[x].description.two+”
“+
“
”；
load5.html（“”）；
var priceOutput=“+data.items[x].price+”；
$（'.itemCartClick'）。在（'click'，函数（）上{
警报（JSON.stringify（data.items[x].price））；
});
}
})（i） ）；
li.append（img）.append（title）.append（price）.append（viewMore）.append（viewMore）；
}
});

以下是我的标记（如果有帮助）：

        <h3 id="titleLd"></h3>
        <h4 id="descriptionLd"></h4>
        <a id="cartLd" href="#">Add to Cart</a>
        <div id="hero">
        <div id="hero_lft">
            <h3 id="imgLd"></h3>
        </div>
        <div id="hero_rt">
            <h3 id="priceLd"></h3>
        </div>
        </div>
        <div id="intro">
            <h2 class="introText"><div id="logo"></div></h2>
            <h3 class="introText2">Hover over an item to view</h3>
        </div>
        <div id="introBg"></div>
        <div id="placeholder"></div>

将鼠标悬停在要查看的项目上

您需要使用如下回调函数：

$('#intro').fadeTo(500,0, function() {
    // do stuff when fade out is complete
    // typically ends with a fadeIn (or fadeTo(delay,1) on 
    // the element you hid previously
});

您还可以编写一个函数并将其名称作为fadeTo的第三个参数传递（请参阅），或者使用.queue（）函数（请参阅，稍微复杂一点）

考虑使用fadeOut（delay）代替fadeTo（delay，0），并使用代替mousedown（）

JSFIDLE会很有帮助（我不完全理解您的用例），但为了澄清所有这些，您应该在“for”循环之外管理viewMore.on（'click'）-这意味着在每个li上存储其在data.items数组中的索引，例如使用数据属性或jQuery data（）函数（在“for”循环中：li.data（'itemIndex'，I）；）:

不要害怕jQuery中的嵌套函数，回调和触发它们的事件是jQuery的全部要点

祝你好运

      for(var i in data.items)
      {

        var li = $('<li class=listItem></li>');
        ul.append(li);
        var img = $('<img>');
        img.attr("src", "assets/images/items/" + data.items[i].thumb + ".jpg");
        var title = $("<h3 class=itemTextTitle>" + data.items[i].title + "</h3>");
        var price = $("<h4 class=itemTextPrice>" + data.items[i].price + "</h4>");
        var viewMore = $("<div class=viewMore price=" + data.items[i].price + ">View More</div>");
        viewMore.on('click', function(x)
        { 

          return function()
          {
            $('#intro').fadeTo(500,1);
            $('#cartLd').fadeTo(500,1);
            $('#introBg').fadeTo(500,1);

            setTimeout(function () {
                load.html("<img src=assets/images/items/" + data.items[x].thumb2 + ".jpg>");
                load2.html("<h3 class=itemTextTitle2>" + data.items[x].title + "</h3>");
                load3.html("<h4 class=itemTextPrice>" + data.items[x].price + "</h4>");
                load4.html("<ul class=itemTextDescription>" + 
                                "<li>" + data.items[x].description.one + "</li>" +
                                "<li>" + data.items[x].description.two + "</li>" +
                                "<li>" + data.items[x].description.three + "</li>" + 
                                "</ul>");
                load5.html("<a class=itemCartClick href=#>Add to Cart</a>");
                var priceOutput =" + data.items[x].price + ";

                $('.itemCartClick').on('click', function(){
                    alert(JSON.stringify(data.items[x].price));
                });
            }, 600);

            $('#intro').fadeTo(500,0);
            $('#introBg').fadeTo(500,0);

          }
        }(i));
        li.append(img).append(title).append(price).append(viewMore).append(viewMore);
      }

for（data.items中的变量i）
{
变量li=$（“
”）；
ul.附加（li）；
var img=$（'“+data.items[i].title+”）；
var价格=$（“”+数据项[i]。价格+“”）；
var viewMore=$（“查看更多”）；
viewMore.on（'click'，函数（x）
{ 
返回函数（）
{
美元("简介").法德托(500,1),；
$（#cartLd'）。法德托（500,1）；
$（'introBg'）.fadeTo（500,1）；
setTimeout（函数（）{
load.html（“”）；
load2.html（“+data.items[x].title+”）；
load3.html（“+data.items[x].price+”）；
load4.html（“
”+
“
”+数据.items[x].description.one+”
”+
“
”+数据.items[x].description.two+”
”+
“
”+数据.items[x].description.three+”
“+
“
”；
load5.html（“”）；
var priceOutput=“+data.items[x].price+”；
$（'.itemCartClick'）。在（'click'，函数（）上{
警报（JSON.stringify（data.items[x].price））；
});
}, 600);
美元("简介").法德托(500,0),；
$（'introBg'）.fadeTo（500,0）；
}
}（i） ）；
li.append（img）.append（title）.append（price）.append（viewMore）.append（viewMore）；
}

---

我最喜欢的jQuery函数，

setTimeOut

，我忘记了它，只记得它。它解决了这个问题@Flo Flo，谢谢你指出。在上而不是JS的onmouseclick。我把它换掉了。

你是说用另一个新函数包装子函数？我相信这会起作用，但似乎我有太多的功能混乱。我只是对我的嵌套函数有点迷茫，这实际上是我一年前开始的一个项目，现在我正在重新学习它。自从我休息之后，我一直在使用Java，而jQuery对我来说已经变得陌生了。有没有一种简洁的方法来重写代码，减少函数的数量，还是需要3个嵌套的函数？谢谢。事实上，一年前它对我来说也很陌生。哈哈。我基本上只是黑客入侵，得到了一些效果相当好的东西，但现在我不知道如何操纵层次结构；你能提供一个如何重写我的代码的例子吗

      for(var i in data.items)
      {

        var li = $('<li class=listItem></li>');
        ul.append(li);
        var img = $('<img>');
        img.attr("src", "assets/images/items/" + data.items[i].thumb + ".jpg");
        var title = $("<h3 class=itemTextTitle>" + data.items[i].title + "</h3>");
        var price = $("<h4 class=itemTextPrice>" + data.items[i].price + "</h4>");
        var viewMore = $("<div class=viewMore price=" + data.items[i].price + ">View More</div>");
        viewMore.on('click', function(x)
        { 

          return function()
          {
            $('#intro').fadeTo(500,1);
            $('#cartLd').fadeTo(500,1);
            $('#introBg').fadeTo(500,1);

            setTimeout(function () {
                load.html("<img src=assets/images/items/" + data.items[x].thumb2 + ".jpg>");
                load2.html("<h3 class=itemTextTitle2>" + data.items[x].title + "</h3>");
                load3.html("<h4 class=itemTextPrice>" + data.items[x].price + "</h4>");
                load4.html("<ul class=itemTextDescription>" + 
                                "<li>" + data.items[x].description.one + "</li>" +
                                "<li>" + data.items[x].description.two + "</li>" +
                                "<li>" + data.items[x].description.three + "</li>" + 
                                "</ul>");
                load5.html("<a class=itemCartClick href=#>Add to Cart</a>");
                var priceOutput =" + data.items[x].price + ";

                $('.itemCartClick').on('click', function(){
                    alert(JSON.stringify(data.items[x].price));
                });
            }, 600);

            $('#intro').fadeTo(500,0);
            $('#introBg').fadeTo(500,0);

          }
        }(i));
        li.append(img).append(title).append(price).append(viewMore).append(viewMore);
      }