Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   behavior="alternate" средствами jQuery (https://javascript.ru/forum/jquery/54561-behavior%3D-alternate-sredstvami-jquery.html)

akkond 22.03.2015 22:53

behavior="alternate" средствами jQuery
 
Здравствуйте! Есть анимация, выполненная средствами html-тега marquee
<marquee width=980 height=100 behavior="alternate" direction="up" scrolldelay=60 scrollamount=1><img src="http://kulinaria1955.ru/templates/New/images/img_3.jpg"></marquee>

но как надо работает только в браузерах Internet Explorer и Firefox.
Chrome и Opera запускают анимацию с нижней границы, и доходя до верхней границы блока, картинка начинает жутко мерцать. Подскажите пожалуйста как реализовать этот код при помощи jQuery.

рони 22.03.2015 23:10

akkond,
css3
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width:980px;
    height:100px;
    overflow: hidden;
    position: relative;
  }
  img{
    position: absolute;
    top:0;
   -webkit-animation: up 5s ease-in-out infinite;
	-moz-animation: up 5s ease-in-out infinite;
	-o-animation: up 5s ease-in-out infinite;
	animation: up 5s ease-in-out infinite;

  }
  @keyframes up {
	50% {
		 top: -120px;
	}
}
@-webkit-keyframes up {
	50% {
		 top: -120px;
	}
}


  </style>
</head>

<body>
<div><img src="http://kulinaria1955.ru/templates/New/images/img_3.jpg"></div>

</body>

</html>

akkond 22.03.2015 23:37

Спасибо большое, рони! Очень помогли.


Часовой пояс GMT +3, время: 08:08.