Question

我正在尝试使用jquery fadeTo方法作为特定li标记的追加方法请求之间的转换，我的脚本在鼠标点击div上时在div id“placeholder”内交换li通过id“viewMore”然而我似乎无法获得正确的函数排序。发生的事情是当用户点击“查看更多”时，li在淡入淡出发生之前立即被交换，之后淡出li然后新的li消失in。有人可以帮我调整方法的层次结构。下面是我的脚本循环注入了JSON数据的ul。提前谢谢！

编辑：setTimeOut是解决方案，这是一个很好的方法。 - 2014年1月11日下午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);
      }
    });

如果有帮助，这是我的标记：

        <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>

Answer 1

你需要使用这样的回调函数：

$('#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的第三个参数（请参阅fadeTo doc），或使用.queue（）函数（请参阅this tutorial，稍微有些棘手）。

考虑使用fadeOut（延迟）而不是fadeTo（延迟，0），并使用.on("click")而不是mousedown（）。

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

for(var i in data.items) { // construct the list }

$('.viewMore').on('click', '#placeholder', function() {
    var i = $(this).data('itemIndex');
    $('#intro').fadeOut(500, function() {
        // modify your DOM using your JSON array (data.items[i])
        $(this).fadeIn(500);
    });
});

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

祝你好运

Answer 2

Bammmmmmm：

      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);
      }

我最喜欢的jQuery函数setTimeOut，我忘记了它，只记得它。它解决了这个问题。 @Flo Flo，感谢你指出.on而不是JS的onmouseclick。我把它换掉了。

使用jQuery追加函数来交换具有淡入淡出过渡的元素

2 个答案: