javascript - 当宏伟的弹出窗口打开时隐藏一个 div

Question

您好，我为图片库使用 magnific pop-up，我想在图片放大时隐藏一个 div，并在图片缩小时再次显示它。这是我的代码:

 $('.gallery-item').magnificPopup({
        type: 'image',
        gallery:{
          enabled:true
        },
        mainClass: 'mfp-with-zoom', // this class is for CSS animation below

        zoom: {
        enabled: true, // By default it's false, so don't forget to enable it

        duration: 300, // duration of the effect, in milliseconds
        easing: 'ease-in-out',


         // CSS transition easing function

        // The "opener" function should return the element from which popup will be zoomed in
        // and to which popup will be scaled down
        // By defailt it looks for an image tag:
        opener: function(openerElement) {
          // openerElement is the element on which popup was initialized, in this case its <a> tag
         // you don't need to add "opener" option if this code matches your needs, it's defailt one.
         return openerElement.is('img') ? openerElement : openerElement.find('img');
       }
      }

});

我应该将 hide() 和 show() 函数放在哪里，以便它们会与宏伟的弹出窗口同时触发。

Answer 1

不要为此使用 css，jQuery 内置了显示和隐藏元素的函数。

open: function(){
  $(".main").hide();
},
  close: function(){
  $(".hidden-div").show();
}