html javascript fade in a out obrázok slučky [closed] - javascript, html, css

Ako môžem roztiahnuť a vyblednúť obraz v slučke?Chcem, aby sa obraz neustále zmenšoval a zmenšoval, kým používateľ nenájde kurzor myši na obrázok, to znamená, keď chcem, aby sa obraz zobrazil, a keď myš opustí obraz - blednutie bude pokračovať.

Ako to môžem urobiť pomocou html / css / javascript / jquery?

odpovede:

Tu je a jsFiddle vysvetlenie, ako to dosiahnuť;)

html

<div id="your_flipping_img" class="animate"></div>

CSS

#your_flipping_img{
background-color:red;
width:150px;
height:150px;
}

.animate{
-webkit-animation: flicking 2s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite;
animation: flicking 2s infinity;
animation-iteration-count: infinite;
}

@-webkit-keyframes flicking {
0%   {opacity:1}
25%  {opacity:0}
50%  {opacity:1}
75%  {opacity:0}
100% {opacity:1}
}

/* Standard syntax */
@keyframes flicking {
0%   {opacity:1}
25%  {opacity:0}
50%  {opacity:1}
75%  {opacity:0}
100% {opacity:1}
}

JS

$("#your_flipping_img").bind("mouseover", function(){
$("#your_flipping_img").removeClass("animate");
})

$("#your_flipping_img").bind("mouseout", function(){
$("#your_flipping_img").addClass("animate");
})

Jednoduchá funkcia na prepínanie blednutia:

var hover = false;
function myFunction()
{
if(!!hover)return;
$("#pic").fadeToggle();
setTimeout(myFunction(), 600);
}

Zabráňte tomu, keď umiestnite kurzor myši:

$("#pic").mouseenter(function()
{
hover = true;
$(this).fadeIn()
})
$("#pic").mouseleave(function()
{
hover = false;
myFunction();
})

Ako jednoduché

<script type="text/javascript">
var timer;
var opacityValue = 0;
function animate(event, object)
{
if(event == "stop") {
clearTimeout(timer);
} else {
timer = setTimeout(function(){
object.animate({
opacity:opacityValue
});
opacityValue = opacityValue ? 0 : 1;
animate("start",object);
},1000);
}
}

$(".imageClass").hover(function(){
animate("stop",$(this));
},function(){
animate("start",$(this));
});
animate("start",$(".imageClass"));
</script>