我应该如何在jQuery函数中使用CSS淡出

Question

I have this jQuery function

 $(document).on('click', "a.delete-just-uploaded-selector", function() {
      $.ajax({
        type: "POST",
        url: url + "/path/",
        data: info,
        success: function(){

        }
    });
       $(this).parents(".deleteimage").animate("fast")
        .animate({ opacity: "hide" }, "slow");          
        return false;
    });

See my fade out animation in the last part. I have read that it is better (faster and better for phones) using CSS transitions when it is simple animations insted of jQuery. But how do I do it? Using .css() in jQuery? I have an external stylesheet. I know how to do CSS transitions in pure css but not the best way to combine it with jQuery.

Answer 1

If you want to do it with CSS it would be like

@keyframes fade {
    from { opacity: 1;}
    to {  opacity: 0; }
}

div.fade {
    opacity: 0;
    animation-name: fade;
    animation-duration: 2s;
}

And when you want to hide an element you should only add class .fade

$('button').on('click', function() {
    $('.my-div').addClass('fade');
});

See fiddle http://jsfiddle.net/shurshilin/cqbj02ob/1/

Answer 2

You can use jquery fadeOut() .

$( "p" ).click(function() {
  $( "p" ).fadeOut( "slow" );
});

Also you have different options available for css properties.

Eg :

specialEasing An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions

More info jquery fade out

Answer 3

Try this:

<style>
.deleteimage{
    background-color:red;
    width:100px;
    height:100px;
}
</style>

<div class="deleteimage">Fade</div>

<script>
//...
$( ".deleteimage" ).animate({
    opacity: 0
}, "slow");
</script>

Answer 4

You don't necessary have to use animation and define it like that. You can just use transition :

 $('.someLink').on('click', function() { $('.myDiv').toggleClass('hide'); }); 

 .myDiv { border: 1px solid black; padding: 10px; opacity: 1; line-height: 1em; transition: opacity 300ms ease, line-height 500ms ease, padding 500ms ease; -webkit-transition: opacity 300ms ease, line-height 500ms ease, padding 500ms ease; -o-transition: opacity 300ms ease, line-height 500ms ease, padding 500ms ease; -moz-transition: opacity 300ms ease, line-height 500ms ease, padding 500ms ease; } .myDiv.hide { opacity: 0; line-height: 0em; padding: 0px 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="myDiv">Boo</div> <a href="#" class="someLink">Click here</a>