2016-12-21 5 views
2

私のマウスがその上に乗るたびに、divの内部の画像を取得しようとしています。フレックスでdivをバウンスさせることはできますか?

私が持っている問題を説明するために、私は以下のスニペットで何が起こりたいのかを素早く模擬しました。

私のマウスがimage/text/whateverを上回るたびにテキストが少し跳ね返ります。

おそらく私が想像することができる唯一のことは、アイテムがフレックスボックススキームの一部であるたびにバウンスしないということですが、それを証明するためのドキュメントを見つけることができませんでした。

フレックスボックスを使用している間に、どのようにバウンスするのか説明できる人がいますか?

$(document).ready(function() { 
 
    $('.text').hover(function() { 
 
    $(this).toggle("bounce",{times: 3}, "slow"); 
 
    }); 
 
});
.one{ 
 
    margin:0; 
 
    } 
 

 
.container{ 
 
    height:500px; 
 
    width:500px; 
 
    background-color:gray; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    align-items:horizontally; 
 
    justify-content:space-around; 
 
    align-items:center; 
 
    } 
 
.dog{ 
 
    background-color:red; 
 
    height:100px; 
 
    width:100px; 
 
    } 
 
.cat{ 
 
    background-color:blue; 
 
    height:100px; 
 
    width:100px; 
 
    } 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <div class="one"> 
 
     <div class="container"> 
 
     <div class="dog"> 
 
      <div class="text">Hello Dog</div> 
 
     </div> 
 
     <div class="cat"> 
 
      Hello Cat 
 
     </div> 
 
     </div> 
 
    </body>

答えて

2

私はjqueryの-UIスクリプト/ CSSに追加し、それが正常に動作します:

使用しているバウンス効果がjQuery UI libraryの一部である - this for referenceを参照してください。

下記を参照のデモ:

$(document).ready(function() { 
 
    $('.text').hover(function() { 
 
    $(this).toggle("bounce", { 
 
     times: 3 
 
    }, "slow"); 
 
    }); 
 
});
.one { 
 
    margin: 0; 
 
} 
 
.container { 
 
    height: 500px; 
 
    width: 500px; 
 
    background-color: gray; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 
.dog { 
 
    background-color: red; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.cat { 
 
    background-color: blue; 
 
    height: 100px; 
 
    width: 100px; 
 
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div class="one"> 
 
    <div class="container"> 
 
     <div class="dog"> 
 
     <div class="text">Hello Dog</div> 
 
     </div> 
 
     <div class="cat"> 
 
     Hello Cat 
 
     </div> 
 
    </div> 
 
</body>

+1

です@グレンは、これがあなたのために働いたかどうか私に知らせてくれますか?ありがとう! – kukkuz

+1

あなたは私にそれを打つhaha +1 –

+0

@kukkuzあなたは何をしたのですか、私は間違っているか違うかを考え出しています。あなたはもっと具体的になりますか?上部に追加したAjaxリンクとCSSシートは何ですか? – Guren

1

は私が提供しているリンクからCSSファイルを取得し、ヘッド部に追加して、テキストやボタン、または画像について特定keeywordsを使用し、それは動作するはずです。リンクはhttp://ianlunn.github.io/Hover/

関連する問題