0

問題、ユーザーが投稿リンクにカーソルを合わせるという意図でワードプレスのテーマを作成すると、リンク機能 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