Can't do simple opacity transition on div

Question

The opacity is not changing nor is it transitioning, any idea what I'm doing wrong? (chrome browser)

I only want to set opacity to 0 if I'm adding the 'transitions' class. Such that it fades in, but does not fade out first.

http://jsfiddle.net/chovy/t37k3/9/

<div></div>

<a href="#" class="start">start</a>


div { 
    width: 100px;
    height: 100px;
    background: #f00;
}

div.transitions {
    -moz-transition: opacity 1s, -moz-transform 1s;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    -o-transition: opacity 1s, -o-transform 1s;
    transition: opacity 1s, transform 1s; 
}

$(".start").click(function(e){
    e.preventDefault();
    $("div").css('opacity', 0).addClass('transitions').css('opacity', 1);
});

edit: I forgot the class on the anchor, and am using inline opacity in real life.

Update: this is my solution I went with: https://stackoverflow.com/a/16848785/33522

Answer 1

your selector in the fiddle isnt matching any elements

<a href="#" class="start">start</a>

$(".start") will match any element with a class "start"

http://jsfiddle.net/t37k3/5/

Update:

http://jsfiddle.net/t37k3/43/

in css add:

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

js code:

$(".show").click(function(e){
    e.preventDefault();
    $("div").css('opacity', 0)  // sets the opacity to 0
    .addClass("notransition")   // add notransition class (will override any other transitions
    .addClass("transitions");   // add the transition css rules (notransition overrides)

    // need this in a setTimeout in order for the 
    // code to delay and let the jquery chaining finish 
    // before we remove notransition and set opacity to 1
    setTimeout(function () {
        $("div").removeClass("notransition")
       .css('opacity', 1)
    }, 0);
});

Answer 2

http://jsfiddle.net/chovy/t37k3/42/

<div></div>

<a href="#" class="start">start</a>

$(".start").click(function(e){
    e.preventDefault();

    var transitions = true
        , $div = $("div"); 

    $div.removeClass('transitions');

    if ( transitions ) {
        $div.addClass('start');
        setTimeout(function(){
            $div.addClass('transitions').removeClass('start');
        }, 20);
    }
});

div { 
    width: 100px;
    height: 100px;
    background: #f00;
}

div.start {
    opacity: 0.1;
}

div.transitions {
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s; 
    opacity: 1;
}

This is what I ended up doing. I add a .start class to set the default state if we're using transitions. Then I add the .transitions class after a brief pause so the .start state will take effect.

Then I reset it on subsequent clicks (not necessary, but helps with fiddle demo).

Comments are welcome. I wanted to avoid doing any inline css in javascript if at all possible.

Answer 3

To add to PSL's answer...

If you are adding the class to do the transition, put the end result css rules you want in the class that you are adding to the element.

So your .transitions class would look like this.

div.transitions {
    opacity: 1;
    -moz-transition: opacity 1s, -moz-transform 1s;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    -o-transition: opacity 1s, -o-transform 1s;
    transition: opacity 1s, transform 1s; 
}

And your click would contain only

$(".start").addClass('transition')

Answer 4

LIVE DEMO

HTML:

<div></div>
<a href="#" class="start">start</a> <!-- ADD A CLASS -->

CSS:

div { 
    opacity: 0.1;
    width: 100px;
    height: 100px;
    background: #f00;
}

.transitions {
    -moz-transition: opacity 1s;     /* NO NEED TO TRANSFORM */
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s; 
    opacity:1;
}

jQ:

$(".start").click(function(e){
    e.preventDefault();
    $("div").addClass('transitions');
});