jqueryエフェクト後のマージンとパディングのリセット

イメージのホバーにjqueryエフェクトの問題があります。jqueryエフェクト後のマージンとパディングのリセット

このようなボタンに私のイメージスティックをホバリングした後：画像の上に数回をホバリングする前に、それはこのようになります

ここに私のJSです：

//For animate images in skills 
$('.skills, .contact').find('img').hover(function(){ 
    $(this).finish().effect("bounce",1000); 
}); //End of hover() animate

HTML：

<div class="row future hideme"> 
    <div class="col-lg-3 col-xs-4 col-lg-offset-1"> 
    <img src="images/angular.png" alt="AngularJS" title="AngularJS"> 
    </div> 
</div> 
<a href="#projects"><button name="projects" class="hideme">Check my projects</button></a>

CSS：

.hideme { opacity: 0; } 
.row { margin: 0 0 0 350px; } 

    .future { 
    margin: 0 0 50px 500px; 
    } 

    button { 
    background: none; 
    outline: none; 
    border: 1px solid #D4DFE6; 
    padding: 13px; 
    border-radius: 5%; 
    padding: 50px 0 0 0 0; 
    }

そして、ここではフィドルです： https://jsfiddle.net/avm7a6oa/12/

どのように私はこれを修復することができますか？

出典

2016-10-27 falauthy

htmlとcssを投稿できますか？あなたがjsfiddle.netのシンプルなデモを作った方が良いでしょう。 – paolobasso

編集されました。私はjsfiddle jqueryUIで見つけることができません... – falauthy

編集ありがとう。（ちょうどあなたに知らせるために）jsfiddle.netは、jqueryまたはjqueryUiをjavascriptオプションから追加することもできるデモをビルドできるWebサイトです。 – paolobasso

bounceを適用すると、position:absolute;というJqueryUIが原因で問題が発生します。これはあなたのimgまたはposition:relative;でdiv内部バウンスを取得する要素と右height

ワーキングDEMOを置くことによって解決可能です。

出典

2016-10-27 17:17:04 paolobasso

それは動作します。ありがとう。 :) – falauthy

私は別の質問があります。今私はシェイク効果を使用しています。今私の2つのイメージはお互いに固執します。私は高さの代わりに幅を使用する必要がありますか？ – falauthy

私はよくjqueryUIのリレー効果を知らないが、私はそれが動作すると思います。 – paolobasso

バウンスアニメーションでは画像がabsoluteの位置になるため、余白は他の要素にはもう影響しません。

出典

2016-10-27 17:16:22 ValLeNain

jqueryエフェクト後のマージンとパディングのリセット

答えて

関連する問題