jQuery slide effect on addClass and removeClass

Question

can i please get some help with jquery, this is the fiddle for what i'm working on, i want to make the image slide to left after i add the class pull-left of twitter-bootstrap after clicking on the image and i also want to make it a global function so that it will work for multiple images and content.

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;
      }
   });
 });

Thank you in advance!

i want to add a slide effect once the image is clicked! the image is in the center at first and then i goes to left! — Abhay Desai, Feb 03 '14 at 08:29
this should help ....http://stackoverflow.com/questions/521291/jquery-slide-left-and-show — iJade, Feb 03 '14 at 08:43
By using `data-` attributes, you can link up elements as sometimes they could be in different places in the DOM, secondly you could use jQuery's SwitchClass UI function to Animate between classes: http://jsfiddle.net/9qZMB/ — MackieeE, Feb 03 '14 at 12:05

Sathish RG · Answer 1 · 2014-02-03T12:20:53.723

0

Here i have written simple plugin form. hope it may helpful

$(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'});
});

please check this fiddle link http://jsfiddle.net/gbHEk/7/

updated with animation http://jsfiddle.net/gbHEk/8/

edited Feb 03 '14 at 12:20

answered Feb 03 '14 at 11:44

Sathish RG

112
6

How does this relate to an left sliding animation? – MackieeE Feb 03 '14 at 11:47
this is a jquery plugin format which we can use in multiple places without duplicating. within this condition block we can add animation to animated object and can display required content writing few simple lines of jquery... – Sathish RG Feb 03 '14 at 11:53

jQuery slide effect on addClass and removeClass

1 Answers1