問題、ユーザーが投稿リンクにカーソルを合わせるという意図でワードプレスのテーマを作成すると、リンク機能 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');
});
これのライブバージョンは私のウェブサイトで見ることができます。
これは単純なことだと思います。