#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2008
    Posts
    110
    Rep Power
    24

    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);
        });
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Hannover, Germany
    Posts
    11
    Rep Power
    0
    try this:
    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); 
        });
    });
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2008
    Posts
    110
    Rep Power
    24
    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.


    Originally Posted by YellowBricks
    try this:
    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); 
        });
    });
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Hannover, Germany
    Posts
    11
    Rep Power
    0
    you mean something like this:
    http://jsbin.com/inegal/1/edit

    With this js:
    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);
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2008
    Posts
    110
    Rep Power
    24
    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.

    Originally Posted by YellowBricks
    you mean something like this:
    http://jsbin.com/inegal/1/edit

    With this js:
    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);

IMN logo majestic logo threadwatch logo seochat tools logo