jQuery Toggle Div Horizontaly

我試圖創建一個幻燈片div功能。基本上，這是一個矩形形狀的地圖 - 當你點擊地圖上的一個位置時，DIV從右側滑出以覆蓋整個地圖。我需要爲多個位置（即多個DIV）執行此操作。jQuery Toggle Div Horizontaly

我嘗試了jQuery中的幾個函數，但沒有運氣。切換效果只允許向上或向下移動，並且我無法讓.animate效果以我想要的方式工作。

這個Jfiddle接近我所需要的，但我試圖讓活動的DIV在新的滑動之前滑出（並且MAP DIV應該始終保持靜態，所以當DIV滑出時，您會看到在新的div滑入之前的地圖）。

這是什麼在Jfiddle：

jQuery(function($) { 

$('a.panel').click(function() { 
    var $target = $($(this).attr('href')), 
     $other = $target.siblings('.active'); 

    if (!$target.hasClass('active')) { 
     $other.each(function(index, self) { 
      var $this = $(this); 
      $this.removeClass('active').animate({ 
       left: $this.width() 
      }, 500); 
     }); 

     $target.addClass('active').show().css({ 
      left: -($target.width()) 
     }).animate({ 
      left: 0 
     }, 500); 
    } 
});

}）;

有什麼想法？

來源

2012-11-20 Anthony A

我發現這解決方案：http://jsfiddle.net/vHJj7/24/ 這是設置多個DIV的最佳方式嗎？我將有超過25個DIV ... –

爲什麼你不使用jQuery toggle/slideToggle函數？ – gotqn

因爲，據我所知，這些功能不允許水平移動。只能上下或淡入/淡出。 –

根據您的jQuery的片段，我想出了

$(document).ready(function() { 
    $('div.panel').css('left', '-200px'); 

    $('a.panel').click(function() { 
     var a = $(this); 
     var p = $(a.attr('href')); 
     var pw = p.width(); 

     //-- if we have an active panel, hide it. otherwise, just show target 
     if ($('div.panel').hasClass('active')) { 
      //-- reset all panels 
      $('div.panel').animate({ 
       left: -pw 
      }, 500, function() { 
       //-- when that is complete, move target panel to position 
       p.addClass('active').show().animate({ 
        left: 0 
       }); 
      }); 
     } else { 
      p.addClass('active').show().animate({ 
       left: 0 
      }); 
     } 
    }); 
});

更新的jsfiddle：http://jsfiddle.net/rs2QK/982/

更新＃1 CSS/HTML，以保持原有的地圖格（＃目標1）顯示。 CSS有點多餘，但考慮到方法，它完成了工作。
更新＃2 更新的小提琴鏈接。我在保存更新的印象之下。哎呀。

來源

2012-11-20 14:59:05

太棒了！這比我提出Don的方法要好得多。它更乾淨，如果我要添加位置，因爲我不必編輯實際的jQuery腳本。太棒了！謝謝！ –

唐靴，你有什麼是接近我一直在尋找的 - 但我想我找到了一個更好的解決方案：

$(document).ready(function() { 
var visible=true; 
$("#test").on('click', function() { 
    $('.t1').animate({width: visible ? 300 : 0}, "slow"); 
    visible=!visible; }); 
$("#test2").on('click', function() { 
    $('.t2').animate({width: visible ? 300 : 0}, "slow"); 
    visible=!visible;   
}); 
$("#close").on('click', function() { 
    $('.common').animate({width: visible ? 0: 0}, "slow"); 
    visible=!visible;   
});

JFiddle

來源

2012-11-20 15:58:11

這也是一個好方法。我確實注意到，點擊地圖細節1和地圖細節2（反之亦然）時會有一些不一致的地方。 –

jQuery Toggle Div Horizo​​ntaly

回答

相關問題

jQuery Toggle Div Horizontaly