2

I want to change the CSS of an input field over a time of 1800 milisec. It works, but there is no smooth transition. Do I have to put a fadeIn/Out somewhere? What am I missing here: 

$(".div-input").blur(function () {
     $('.div-input').removeClass("div-input", 1800).addClass('div-input-second');
});
Improve this question

6 Answers 6

Reset to default
2

You can use .animate() to change the CSS values yourself, but there isn't a way to fade between classes like that.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

"but there isn't a way to fade between classes like that" Guess not.
@Youss, while there isn't a way to directly animate between classes, you can do something like what I've posted in my updated answer. It's very close.
@Youss not with base JQuery, but using JQueryUI you can, see my answer.
2

Looks like invalid parameters for one, and also you can use contextual this for the selector in your function for blur.

removeClass() takes either a class name or a function. Not sure what the 1800 in your parameter list. If you want animation look into animate.

Try this...

$(".div-input").blur(function () {
     $(this).removeClass("div-input").addClass('div-input-second');
});
Improve this answer

1 Comment

That works (like I already mentioned) but I want a smooth transition in to the second class, something like a fadeIn/Out
2

To do css style animations you need to use .animate jquery animate

Improve this answer

1 Comment

I know about that but the CSS is to big so I would rather change classes
2

To expand on previous answers, the .removeClass and .addClass functions don't have timing associated with them. You will need to animate the css manually if you want a class-to-class animation.
Here's an example:

CSS

.div-input{
    color: red;
    width: 200px;
}

.div-input-second{
    color: blue;
    width: 300px;
}

jQuery

$(".div-input").click(function () {
    $(this).animate({
        color: '#0000ff',
        width: '300px'
    }, 1800).removeClass("div-input").addClass('div-input-second');
});

This should cause the animation to occur, and then swap the classes after the animation finishes, so you can do more with that class name if you need to.

edit:

See this jsfiddle for a working demo using .click. I'm not positive .blur has a noticeable effect on div elements.

edit 2:

A simple effect to fade an element out, swap classes and then fade it back in might look something like this (using the same css as above):

jQuery

$(".div-input").click(function () {
    $(this).fadeOut(900, function(){
        $(this).toggleClass("div-input div-input-second")
            .fadeIn(1800);
    })
});

You can see this in action at this updated jsfiddle.

Improve this answer

5 Comments

sorry, I can't get it to work, help please? I must be doing something silly. jsfiddle.net/RKesZ
@LocustHorde @Youss Try the updated code. You have to quote any parameters of .animate unless they're numbers. Also, .blur doesn't work on divs. Use .click
I already know how to do this. I was hoping to simply be able to change classes since the CSS code is really large. I guess what I whant to do is not possible. Thanks anyway for your code since I didn't knew how to animate and swap classes at the same time. I voted up
@Youss, try this updated jsfiddle I'll also update my answer.
Thanks for your time. What I want to do is not possible with fade because of the delay. If you would click ten times it would fade ten times. The way I constructed my (many) input fields doesn't go well with this approach. Your first code is all that is possible but Jason Kaczmarsky suggested it first so that's why I accepted his answer (I know how to animate things, I was hoping for something else)
1

Either use jQuery animate or have a look at this plugin, http://plugins.jquery.com/project/animate-to-class I've not tried it but seems to be what you're looking for.

Also - if you're using FireFox download Firebug - it has a good console for catching JS errors.

Improve this answer

Comments

1

You can do it with JQuery UI http://jqueryui.com/demos/switchClass/

$(".div-input").blur(function () {
    $(".div-input").switchClass("div-input", "div-input-second", 1800);
    // Optionally to switch back
    // $(".div-input-second").switchClass("div-input-second", "div-input", 1800);  
});

As shown in this fiddle: http://jsfiddle.net/kSBP3/3/

Improve this answer

8 Comments

+1. Also, I understand what your comment is for, but if someone were to misunderstand and just uncomment it, it wouldn't work. You might want to make it its own code block and note that it's the reverse duplicate.
@rockerest but it does work, it just makes it into a toggle, so when you blur the first time it will switch to the 2nd class, and when you blur the 2nd time it will switch back to the first class.
that's impossible. You're removing .div-input. The next blur on that element wouldn't trigger this function at all.
@rockerest It's not a live event, and it's never unhooked, so even though the class has changed the event is still there. It'd be more semantically correct to hook it up by id, that way the intention is more clear, but it does work just fine, as you can see in the jsfiddle
indeed. I just checked the jsfiddle and it works. Nothing personal against you, but that kind of code kills me. I think it's mostly javascript's fault. It's totally unclear how the reverse toggle would work unless you have a pretty decent understanding of javascript events, binding, hooks, etc. I know I don't have a great understanding, and MANY people also don't. Anyway, nice code, the +1 stands! :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.