SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery not working on renamed element

    Hi there,

    So I want to perform a number of animations on a div on a click event. Then I want to perform a second set of animations, again on a click event.

    I'm using the same button each time, but changing the id to reverse the process. So the anchor starts off as '#more', then at the end of the animation, it becomes '#less'.

    The animations work when the anchor has an id of more, but not when it has an id of less. I'm wondering if there is a more graceful way of performing this function.

    There a test page up here:
    www.theclassifiedsband.co.uk/testpage

    and here's the relevant code:
    Code:
      $('#more').click(function(){
    	$('#major').fadeOut('slow', function(){
    	  $('#captain').animate({width: "800px"}, 'slow').delay(100).animate({height: "620px"}, 'slow', function(){
    		$('.hide').fadeIn('slow');
    		$('#more').text('Read Less').attr('id', 'less');
    	  });
    	});
      });
      
      $('#less').click(function(){
    	$('#hide').fadeOut('slow', function(){
    	  $('#captain').animate({height: "260px"}, 'slow').delay(100).animate({width: "320px"}, 'slow', function(){
    		$('#less').text('Read More').attr('id', 'more');
    	    $('#major').fadeIn('slow');
    	  });
    	});
      });
    Any thoughts much appreciated.

    Mike

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest to add/remove extra class instead of changing id. So instead of changing to #less, add class "less". CSS entry would be #more.less, and instead of changing it back to #more, remove class "less".

    Code would be something like this:
    Code:
    $('#more').click(function(){
        if(!$(this).hasClass('less'))
        {
            $('#major').fadeOut('slow', function(){
              $('#captain').animate({width: "800px"}, 'slow').delay(100).animate({height: "620px"}, 'slow', function(){
                $('.hide').fadeIn('slow');
                $('#more').text('Read Less').addClass('less');
              });
            });
        }
        else{
            $('#hide').fadeOut('slow', function(){
              $('#captain').animate({height: "260px"}, 'slow').delay(100).animate({width: "320px"}, 'slow', function(){
                $('#more').text('Read More').removeClass('less');
                $('#major').fadeIn('slow');
              });
            });
        }
    });

  3. #3
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks CyberAlien,

    I did think about that, and did try it with a class, and it still didn't work, but I will give it another go. There's a very good chance I mistyped something along the way.

    Best,
    Mike


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •