CSS背景图像之间的过渡

Question

In my site I have a switch between a down arrow & and an up arrow. See here: http://jsfiddle.net/4uLghzg7/

Is there a way I can add a slight animation transition when clicked? So it fades in/out between the two icons?

 function close_accordion_section(source) { $(source).parent().find('.accordion-section-title').removeClass('active'); $(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open'); } $('.accordion-section-title').click(function (e) { if ($(e.target).is('.active')) { close_accordion_section(e.target); } else { $(this).addClass('active'); $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open') } e.preventDefault(); }); 

 .accordion { overflow: hidden; margin-bottom: 40px; } .accordion-section { padding: 15px; border: 1px solid #d8d8d8; background: #fbfbfb; } .accordion-section-title { width: 100%; display: inline-block; background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png"); background-size: 5% 100%; background-repeat: no-repeat; background-position: top right; } .accordion-section-title.active { background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat; background-size: 5% 100%; background-repeat: no-repeat; } .accordion-section-title.active, .accordion-section-title:hover { text-decoration: none; transition: color 0.1s linear; } .accordion-section-content { padding: 15px 0; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a> <div id="accordion-1" class="accordion-section-content"> <p>Text.</p> <p> </div> </div> </div> 

Answer 1

You need a special trick to fade between background-images, you will need two elements, and fade the inner elements opacity :

<div id="arrowUp">
    <div id="arrowDown">
    </div>
</div>

Demo of your code (modified):

 function close_accordion_section(source) { $(source).parent().find('.arrowDown').removeClass('active'); $(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open'); } $('.accordion-section-title').click(function(e) { if ($('.arrowDown').is('.active')) { close_accordion_section(e.target); } else { $('.arrowDown').addClass('active'); $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open') } e.preventDefault(); }); 

 .accordion { overflow: hidden; margin-bottom: 40px; } .accordion-section { padding: 15px; border: 1px solid #d8d8d8; background: #fbfbfb; } .arrowUp { width: 20px; height: 20px; background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png"); background-size: 100%; background-repeat: no-repeat; background-position: center center; } .arrowDown { opacity: 0; width: 20px; height: 20px; background-color: white; background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"); background-size: 100%; background-repeat: no-repeat; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .arrowDown.active { opacity: 1; background-position: center center; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .accordion-section-title.active, .accordion-section-title:hover { text-decoration: none; transition: color 0.1s linear; } .accordion-section-content { padding: 15px 0; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a> <div class="arrowUp" style="float: right"> <div class="arrowDown"> </div> </div> <div id="accordion-1" class="accordion-section-content"> <p>Text.</p> <p> </div> </div> </div> 

Answer 2

just write .click function in

$(function() {
});

Try this..

$(function() {
    $('.accordion-section-title').click(function (e) {
         e.preventDefault();
        if ($(e.target).is('.active')) {
            close_accordion_section(e.target);
        } else {
            $(this).addClass('active');
            $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
        }
    });
});

Answer 3

You could change the arrows to be actual elements (pseudo elements in the following example) and put them on top of each other. Then have the down arrow fade in/out on top of the up arrow to create the effect you're looking for.

 // up arrow positioned absolutely
.accordion-section-title:before {
    content: '';
    position: absolute;
}

 // down arrow positioned absolutely
.accordion-section-title:after {
    content: '';
    opacity: 0;
    transition: opacity 0.2s ease;
    position: absolute;
}

 // animate in down arrow
.accordion-section-title:after {
    content: '';
    opacity: 1;
    position: absolute;
}

jsfiddle working example: http://jsfiddle.net/4uLghzg7/6/

Hopefully this answers what you were asking about.

Answer 4

you can't actually do much animation on raster background images but if css 3 transition is acceptable you can try something like

.fade-background{
    transition: background 1s cubic-bezier(0.55, 0.06, 0.68, 0.19) !important;
}

I added a class "fade-background" on your anchor tag, fiddle here

http://jsfiddle.net/dango_x_daikazoku/4uLghzg7/5/