0

これを行う方法について、過去数時間探し回っていますが、どこにも見つかりません。

いくつかのボタン (div) があります。div 内の div で構成されます。親の div には通常のボタンの背景画像があり、子には明るい背景画像があります。マウスオーバーでは、子 div を不透明度 1.0 にしてから 0.2 にフェードアウトします (フラッシュのように見えます)。MouseOut では、0.0 に戻すだけです。明らかに、MouseOver/MouseOut キューの構築は望ましくありません。

キューの効果を調べましたが、MouseOver ボタンでこれを機能させる方法がわかりません。さらに、私はJSが苦手です。

4

4 に答える 4

2

mouseenter と mouseleave を使用する必要があります。mouseover および mouseout イベントは、カーソルが要素内に移動すると継続的に発生します。

$(".button")
    .mouseenter(function() {
        var overlay = $("div:first",this).fadeTo(350, 1.0, function() {
            overlay.fadeTo(350, 0.2);
        });
    })
    .mouseleave(function() {
        $("div:first", this).stop().fadeOut(350);
    });
于 2009-12-08T20:00:48.727 に答える
0

fadeTo メソッドを見ましたか？ http://jquery.bassistance.de/api-browser/#fadeToStringNumberNumberFunction

このようなものになるはずです（ただし、テストしていません）

var childdiv = $("#childdiv");
childdiv .fadeTo(500, 1.0, function(){ 
  childdiv .fadeTo(500, 0.2);
});
于 2009-12-08T19:42:38.980 に答える
0

問題は、ホバーにも機能があり、混乱していると思います...

ButtonBGanim という名前の div に対処します。

$(document).ready(function(){

var buttonbg = $("#ButtonBGanim");

$(buttonbg).hover(
function() {
$(this).stop().fadeTo(500, 1.0, function(){ 
  buttonbg .fadeTo(500, 0.2);
},
function() {
$(this).stop().fadeTo(500, 0.0)
});
于 2009-12-08T20:00:33.500 に答える
0

テストされていませんが、かなり近いはずです。

$("#id").hover(
      function () {
    $(this).stop().children("div").fadeTo("fast", 1.0).fadeTo("slow", 0.2);
      }, 
      function () {
        $(this).stop().children("div").fadeTo("slow", 0.0);
      }
    );
于 2009-12-08T20:07:16.203 に答える