在第一次点击时跳转动画，在第二次时跳转正常

我创建了一个元素，点击图片，内容填充下面（有点像谷歌图片搜索），我做了90％动画会在第一次点击时跳转，而不是增加内容容器的高度。而我不知道为什么是这样的：\ 一旦你点击它并关闭它，动画就会很好地滑落。在第一次点击时跳转动画，在第二次时跳转正常

我所做的小提琴，因为它是相当大的

http://jsfiddle.net/9rc044hg/

jQuery代码是这样的：

jQuery(document).ready(function ($) { 
    var $content = $(".featured_portfolio"); 
    var $loaded_content = $("#portfolio_content_details"); 
    var $item_selector = $(".featured_item"); 
    var $close = $("#close_wrapper"); 

    $(document).on('click', '#close_wrapper', function (e) { 
     e.preventDefault(); 
     $loaded_content.animate({ 
      height: 0 
     }, 500, "linear") 
     setTimeout(function() { 
      $loaded_content.hide() 
     }, 500); 
     $('#pointer').hide(); 
    }); 

    $content.imagesLoaded(function() { 
     $item_selector.on('click', function() { 
      leftOffset = parseInt($(this).offset().left + $(this).width()/2, 10); 
      $('#pointer').css({ 
       'left': leftOffset, 
       'display': 'inline-block' 
      }); 

      if (!$(this).hasClass("current")) { 
       $(".current").removeClass("current"); 
       $(this).addClass("current"); 
      } 

      var element_number = $(this).data('number'); 
      var insert_after = (Math.ceil(element_number/4) * 4) - 1; 

      $loaded_content.detach().insertAfter($item_selector.eq(insert_after)); 

      var thumbnail = $(this).data('thumbnail'); 
      var name = $(this).data('name'); 
      var link_to = $(this).data('link_to'); 
      var date = $(this).data('date'); 
      var description = $(this).data('description'); 
      var cat = $(this).data('cat'); 
      var client = $(this).data('client'); 
      var skills = $(this).data('skills'); 

      $loaded_content.find('.gallery_post_image').html(thumbnail); 
      $loaded_content.find('.gallery_post_title').html(name); 
      $loaded_content.find('.gallery_post_linkto a').attr("href", link_to); 
      $loaded_content.find('.gallery_post_date').html(date); 
      $loaded_content.find('.gallery_post_description p').html(description); 
      $loaded_content.find('.gallery_post_category .cat_names').html(cat); 
      $loaded_content.find('.gallery_post_client .client_names').html(client); 
      $loaded_content.find('.gallery_post_skill .skills_names').html(skills); 

      setTimeout(function() { 
       if (!$(this).hasClass("current")) { 
        $loaded_content.show().animate({ 
         height: "560px" 
        }, 500, "linear"); 
        $('html, body').animate({ 
         scrollTop: $loaded_content.offset().top - 300 
        }, 500); 
       } 
      }, 500); 
     }); 
    }); 
});

我也试图使之接近，如果你点击相同的图像，但没有运气。点击图片时，我添加了一个类current，当我在关闭点击事件中定位该类时，没有任何反应。

任何帮助表示赞赏。

来源

2015-03-31 dingo_d

这是因为您正在使用JavaScript注入内容，因此浏览器在计算出元素之前并不知道元素的高度，这会在第一次显示时发生。尝试在标记内对您的内容进行相同处理。 – kursus 2015-03-31 12:39:23

但是我强迫高度改变为560px，无论元素高度如何。我也怀疑div的附加。 – 2015-03-31 13:27:53

560px设置是动画的，所以它不会改变任何我猜测的。老实说，这段代码没有意义，当你不应该的时候，你通过JS来做所有事情。在纯html/css中重建一个合适的容器，用css隐藏它，并且只用javascript来切换隐藏/显示状态（这使得只有几行JS）。 – kursus 2015-03-31 15:34:17

那么答案就是将您的#portfolio_content_details的显示设置为block并将高度设置为0（并且您必须处理指针的初始显示），一般而言，您的解决方案非常糟糕性能和解决非常基本问题的非常复杂的解决方案。

正如kursus所建议的，之前正确设置所有东西，然后使用js来隐藏和显示更多信息将是一个更好的方法。

一般提示：而不是使用$（this）几次只是定义一个局部变量 var $ this = $（this）;

现在每次执行此函数时，jQuery都不会创建新的$（this）。

来源

2015-04-01 01:10:36 FTav

我会结合kursus所说的去做。由于我正在修改高度并添加类，所以我可以使用css进行转换，这应该会更好。 – 2015-04-01 07:00:14

在第一次点击时跳转动画，在第二次时跳转正常

回答

相关问题