3

マウスオーバー時に画像の横に黒いバーを表示するメソッドを作成しました。画像が 1 つだけの場合は問題ありませんが、複数の画像に適用すると、マウス オーバー時に両方の画像に黒いバーが表示されます。

マウスオーバー イベントがその特定の画像の黒いバーのみをアクティブにするように、各画像を互いに独立して動作させることは可能ですか?

jsFiddle - http://jsfiddle.net/7kw8z/11/

メソッドを呼び出す$("img.edit").panzoom();

そして、これは方法です：

!function($){


$.fn.panzoom = function() {
    var $this = $(this);
    this.imagesLoaded(function(){

        $this.wrap('<div class="img_wrapper" />');

        var imgEl = $this.parent(".img_wrapper");

        imgEl.width($this.width());
        imgEl.height($this.height());
        //imgEl.offset({top:$this.offset().top,left:$this.offset().left});

        imgEl.append('<div class="img_menu" />');
        menuEl = imgEl.children(".img_menu");


        imgEl.hover(function() {
            $(menuEl).css("visibility", "visible");
        },  function() {
            $(menuEl).css("visibility", "hidden");
        });

    });
}

}(window.jQuery);
4

4 に答える 4

5

できるよ 

$.fn.panzoom = function() {
return this.each(function(){
    var $this = $(this);
    $this.imagesLoaded(function(){
        $this.wrap('<div class="img_wrapper" />');

        var imgEl = $this.parent(".img_wrapper");

        imgEl.width($this.width());
        imgEl.height($this.height());

        imgEl.append('<div class="img_menu" />');
        var menuEl = imgEl.children(".img_menu");

        imgEl.hover(function() {
            menuEl.css("visibility", "visible");
        },  function() {
            menuEl.css("visibility", "hidden");
        });
    });
});
}

http://jsfiddle.net/7kw8z/21/

于 2013-06-12T14:33:33.140 に答える
3

mouseenter/leave のスコープは現在の要素なので、 を使用できます$(this)。find を使用して、表示/非表示しようとしている要素を取得できます。

    imgEl.hover(function() {
        $(this).find(".img_menu").css("visibility", "visible");
    },  function() {
        $(this).find(".img_menu").css("visibility", "hidden");
    });
于 2013-06-12T14:25:39.950 に答える
1

なぜこれをすべて js で行っているのかわからないのですが、CSS を使用できますか? 取り除くだけ

    imgEl.hover(function() {
        $(menuEl).css("visibility", "visible");
    },  function() {
        $(menuEl).css("visibility", "hidden");
    });

そして、あなたは追加することができます

.img_wrapper:hover .img_menu {
    visibility: visible;
}

http://jsfiddle.net/7kw8z/14/

本当に JavaScript が必要な場合menuElは、 が要素ではなく、要素* s *のグループであることを認識する必要がありますimgEl.children。

于 2013-06-12T14:26:19.750 に答える
0

人々は私を打ち負かしましたが、ここに私の答えがあります。ここでプラグインを作成するのが理想的な方法です!

$.fn.panelize = function (initState) {

  // set a default show state
  var show = initState || false;

  var animation = {
    duration: 300,
    easing:   'linear',
  };

  return this.each(function() {
    _this = $(this);

    var element = {
      show:    $('.show', _this),
      close:   $('.close', _this),
      content: $('.panel-content', _this),
    };

    var hidePanel = function () {
      _this.animate({
        bottom: -(element.content.height()),
      }, 
      animation.duration, 
      animation.easing, 
      function () {    
        element.show.show();
        element.close.hide();
      })
    };

    var showPanel = function () {
      _this.animate({
        bottom: 0,
      }, 
      animation.duration,
      animation.easing,
      function () {
        element.close.show();
        element.show.hide();
      })
    }

    // search for the show button within this context
    element.show.on('click', function () {
      showPanel();
    }) 

    // search for the close button within this context.
    element.close.on('click', function () {
      hidePanel();
    }); 

    // hide panel initally, if configured
    if (!show) hidePanel();

  });
}

// reduced to a single class
$('.infoToggle').panelize();

Html は次のようになります。

   <div class="infoToggle">
        <div class="panel-controller">
            <div class="tab-controller">
                <span class="close">CLOSE</span>
                <span class="show">MORE INFO</span>
            </div>
        </div>
        <div class="panel-content">
            Content goes here
        </div>
    </div>

    <div class="infoToggle">
        <div class="panel-controller">
            <div class="tab-controller">
                <span class="close">CLOSE</span>
                <span class="show">MORE INFO</span>
            </div>
        </div>
        <div class="panel-content">
            Content goes here
        </div>
    </div>
于 2016-10-13T20:55:35.070 に答える