Animate a span, hide it, change text, show it, animate it back out

Dev Shed Forums Sponsor:

October 6th, 2012, 06:26 AM

mbreezy

Contributing User

Join Date: Feb 2008

Posts: 110

Time spent in forums: 21 h 58 m 49 sec
Reputation Power: 23

jQuery - Animate a span, hide it, change text, show it, animate it back out

Explained it in the subject.

I've a span element with some text in it, when that element is clicked I want it to slide out (left side as an anchor, right side compressing to the left, I've accomplished this thus far with float:left), change the text and then slide back out showing the new text.

So far I've been able to get the span to slide out and hide, but beyond that, nothing. Oh, and I can get the text to change with innerHTML but that's it.

Any ideas?

I've a span...

Code:

<span id="test">some text here</span>

I've some Jquery...

Code:

    $("#test").click(function () {
	  $(this).animate({width: "0"}, 1000, function(){
		$(this).hide();
	});
   	  document.getElementById("test").innerHTML = "different text than original";		
	  $(this).show();
	  $(this).animate({width: "100"}, 1000);
    });

October 6th, 2012, 07:59 AM

YellowBricks

Registered User

Join Date: Oct 2012

Location: Hannover, Germany

Posts: 11

Time spent in forums: 2 h 54 m 33 sec
Reputation Power: 0

try this:

JavaScript Code:

Original - JavaScript Code
$("#test").click(function () { var $this = $(this); $this.animate({width: "0"}, 1000, function() { $this .hide() .text("different text than original") .show() .animate({width: "100"}, 1000); }); });

$("#test").click(function () {
    var $this = $(this);
    $this.animate({width: "0"}, 1000, function() {
        $this
          .hide()
          .text("different text than original")
          .show()
          .animate({width: "100"}, 1000); 
    });
});

October 7th, 2012, 06:23 AM

mbreezy

Contributing User

Join Date: Feb 2008

Posts: 110

Time spent in forums: 21 h 58 m 49 sec
Reputation Power: 23

Thanks tons! That worked perfect!

I'm also trying something else. I've a list of items that I want to display for a few seconds, fade away (fadeto in jq), change the text to the next item in the list, do the same thing and so on. At the end of the list I'd like to start it from the beginning. Right now I'm messing with the code you posted because I think it's a good starting point.

Running into problems displaying from a list (bunch of text isn't hard) and integrating the setInterval.

Quote:

Originally Posted by YellowBricks

try this:

JavaScript Code:

Original - JavaScript Code
$("#test").click(function () { var $this = $(this); $this.animate({width: "0"}, 1000, function() { $this .hide() .text("different text than original") .show() .animate({width: "100"}, 1000); }); });

$("#test").click(function () {
    var $this = $(this);
    $this.animate({width: "0"}, 1000, function() {
        $this
          .hide()
          .text("different text than original")
          .show()
          .animate({width: "100"}, 1000); 
    });
});

October 7th, 2012, 09:17 AM

YellowBricks

Registered User

Join Date: Oct 2012

Location: Hannover, Germany

Posts: 11

Time spent in forums: 2 h 54 m 33 sec
Reputation Power: 0

you mean something like this:
http://jsbin.com/inegal/1/edit

With this js:

JavaScript Code:

Original - JavaScript Code
var items = ["Item 1", "Item 2", "Item 3", "Item 4"], cur_item = 1, ticker = $("#ticker"); ticker.text(items[0]); setInterval(function() { cur_item = (cur_item+1 > items.length - 1) ? 0: cur_item+1; ticker.text(items[cur_item]); }, 1500);

var items = ["Item 1", "Item 2", "Item 3", "Item 4"],     
cur_item = 1,     
ticker = $("#ticker"); 
 
ticker.text(items[0]);
  
setInterval(function() {      
    cur_item = (cur_item+1 > items.length - 1) ? 0: cur_item+1;      
    ticker.text(items[cur_item]);    
}, 1500);

October 7th, 2012, 02:14 PM

mbreezy

Contributing User

Join Date: Feb 2008

Posts: 110

Time spent in forums: 21 h 58 m 49 sec
Reputation Power: 23

Almost exactly what I'm looking for, I was just seeing it it was possible to do with Jquery. I'm working on getting that code you showed me to fade with each one.

Quote:

Originally Posted by YellowBricks

you mean something like this:
http://jsbin.com/inegal/1/edit

With this js:

JavaScript Code:

Original - JavaScript Code
var items = ["Item 1", "Item 2", "Item 3", "Item 4"], cur_item = 1, ticker = $("#ticker"); ticker.text(items[0]); setInterval(function() { cur_item = (cur_item+1 > items.length - 1) ? 0: cur_item+1; ticker.text(items[cur_item]); }, 1500);

var items = ["Item 1", "Item 2", "Item 3", "Item 4"],     
cur_item = 1,     
ticker = $("#ticker"); 
 
ticker.text(items[0]);
  
setInterval(function() {      
    cur_item = (cur_item+1 > items.length - 1) ? 0: cur_item+1;      
    ticker.text(items[cur_item]);    
}, 1500);

jQuery - Animate a span, hide it, change text, show it, animate it back out

Developer Shed Advertisers and Affiliates