Clever Geek Handbook

Is there a way to click when the image's opacity is 1?

I have an image that can be clicked and it starts with opacity

of 0

and animates until 1

it hovers. Is there a way to make it only available on animation while opacity

- in 1

?

+3


source to share


1 answer


I believe you are looking for something like this:

$(document).ready(function() {
    $('img').on('mouseover', function() {
        $(this).fadeTo( 3000 , 1 );
    });
    $('img').on('click', function(e) {
        e.preventDefault();
        if($(this).css('opacity') == 1) {
            alert('you can click it now');
        }
    });
});
      

        
        
        
      

    
img {
    opacity: 0;    
}
div{
    display: inline-block;
    border: 1px solid black;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <img src="https://s-media-cache-ak0.pinimg.com/736x/2f/cc/b2/2fccb29f96bf7f0b0ea94d42832a4c4f.jpg"/>
</div>
Run codeHide result




the function .on('click')

prevents any default action of clicking the image using a line of code e.preventDefault()

. it then checks if the opacity of the image is 1

, and then you can put your code there to do what you want it to click when the opacity is 1

.

hope this helps!

+5


source






More articles:


All Articles