Невозможно сделать простой переход непрозрачности на div

Question

Прозрачность не меняется и не переходит, любая идея, что я делаю неправильно? (chrome browser)

Я только хочу установить непрозрачность 0, если я добавляю класс «переходов». Такое, что оно затухает, но сначала не исчезает.

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); 
}); 

редактировать: Я забыл класс на якоре, и я использую встроенные непрозрачности в реальной жизни.

Update: это мое решение, я пошел с: (». Старт ") https://stackoverflow.com/a/16848785/33522

Answer 1

вашего селектор в скрипичном ISNT соответствия любых элементов

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

$ будет соответствовать любому элементу с классом" начать»

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

Update:

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

в CSS дополнения:

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

код расслоение плотной:

$(".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

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'); 
}); 

Answer 3

Чтобы добавить ответ PSL в ...

Если вы добавляете класс, чтобы сделать переход, поставить которые вы хотите добавить в элемент, который вы добавляете к элементу.

Таким образом, ваш класс .transitions будет выглядеть так.

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; 
} 

И ваш щелчок будет содержать только

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

Answer 4

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; 
} 

Это то, что я в конечном итоге делает. Я добавляю класс .start для установки состояния по умолчанию, если мы используем переходы.Затем я добавляю класс .transitions после короткой паузы, так что состояние .start вступит в силу.

Затем я перезагружаю его при последующих щелчках (не обязательно, но помогает с демонстрацией скриптов).

Комментарии могут быть возвращены. Я хотел бы избежать выполнения встроенного css в javascript, если это вообще возможно.