jQuery对addClass和removeClass的幻灯片效果

时间:2014-02-03 08:22:23

标签: jquery twitter-bootstrap

我可以请一些关于jquery的帮助,这是我正在处理的fiddle,我想在我添加类左拉之后将图像向左滑动单击图像后强大的twitter-bootstrap,我也想让它成为一个全局函数,以便它可以用于多个图像和内容。

CODE:

 $(document).ready(function () {
   var showORhide = true;
   $( ".team-img" ).click(function() {
      if(showORhide == true){
        $( "#team-center-img" ).removeClass("center-block");
        $( ".team-img" ).addClass("pull-left");
        $(".team-content").fadeIn(2000);
        showORhide = false;
      }else{
        $( "#team-center-img" ).removeClass("pull-left");
        $( ".team-img" ).addClass("center-block");
        $(".team-content").hide();
        showORhide = true;
      }
   });
 });

提前谢谢!

1 个答案:

答案 0 :(得分:0)

这里我写了简单的插件表单。希望它可能有所帮助

$(function(){
    $.myPlugin = {
        imgToggle : function(options){
        var defaults = {selector:'.test'};
        var options = $.extend(defaults,options);
            $('a',options.selector).click(function(){
                if(this.className == 'active'){
                    this.className = '';
                }else{
                    this.className = 'active';
                }
            });
        }
    }
})

$(function(){
    $.myPlugin.imgToggle();
});

$(function(){
    $.myPlugin.imgToggle({selector:'any css selector'});
});

请查看此小提琴链接http://jsfiddle.net/gbHEk/7/

使用动画http://jsfiddle.net/gbHEk/8/

进行了更新