0

问题，我创建了我的 wordpress 主题，其预期的想法是用户将鼠标悬停在帖子链接上，然后链接功能 img 会滑入和滑出。创建帖子的代码有效，这是生成的。问题是我创建的过渡 jQuery 代码没有为图像的滑动切换设置动画，它正确地添加了“选择”类的添加删除。谢谢您的帮助

这是我的包装

<div id="blog-posts">


</div>

里面是帖子所在的地方。

<div id="blog-posts">
  <div class="posts-slider selected">                                       
  <img width="600" height="156" alt="angularjs" class="attachment-post-thumbnail wp-post-image sel-img" src="http://designsbycamaron.net/wp-content/uploads/2013/07/angularjs.png">                     
 <div class="slider-content">
  <ul>                                  
     <li><a href="http://designsbycamaron.net/2013/07/new-framework-knowledge/">                                        
     New Framework Knowledge
     </a>  
     </li>
     <li><p>I have been really careful to not add Frameworks that I am not familiar with or have not used extensively</p>
     </li>
   </ul>
   </div>
  </div>
 </div>

这是CSS

 div.selected img {
     display: block;
     height: auto;
     position: absolute;
  }

  .slider-content {
     clear: both;
     float: right;
     padding-right: 20px;
     text-align: right;
     width: 350px;
   }

这是我的 jQuery，它应该进行转换。

  $('.posts-slider a').mouseover(function(){
$(this).parents('.posts-slider img').slideToggle().siblings('.selected img').slideToggle('slow');
    $(this).parents('.posts-slider').addClass('selected').siblings('.selected').removeClass('selected');
});

你可以在我的网站上看到这个的现场版本。

我想这很简单。

4

1 回答 1

1

首先，HTML 的布局并不真正有助于简单的解决方案，但是 - 这应该可行。将鼠标悬停功能替换为：

$('.posts-slider a').mouseover(function(){
      var wrapper = $(this).closest('.posts-slider');
      var image = $('img', wrapper);
      $('.posts-slider img').not(image).slideUp();
      image.slideDown();
      $('.posts-slider').removeClass('selected').filter(wrapper).addClass('selected');
});

并替换您的 CSS，以便所有图像都是position:absolute，而不仅仅是具有 .selected父级的图像。

于 2013-07-01T19:29:46.267 回答