jquery анимировать только непрозрачность слева направо

Возможно ли одушевить только непрозрачность и заставить ее двигаться в направлении по div? Скажем, слева направо?jquery анимировать только непрозрачность слева направо

Вот мой код до сих пор: просто отсутствует то, что говорит слева, если это даже возможно:

$(document).ready(function() { 
    $('#box').mouseenter(function() { 
     $(this).animate({opacity: ".5"}, 500); 
    }); 
});

источник

2014-01-08 ryanb

Вы можете использовать CSS linear-gradient, а затем запустите цикл анимации, чтобы изменить его размер. Вот быстрый JS Fiddle, показывающий эффект.

Основная идея - установить CSS на основе прогресса анимации. Например, используя белый фон выцветанию прозрачным, при 25% полной вы должны:

background: linear-gradient(to right, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.25) 25%, 
    rgba(255, 255, 255, 0) 100);

и на последующих этапах изменения 0.25 и 25% на текущий прогресс процентов. Javascript из скрипкой выглядит следующим образом:

var $child = $('#child'); 
var steps = 100; 
var interval = 20; 
var step = 0; 
var animationStep = function() { 
    if(step >= steps) return; 
    ++step; 
    var progress = step/steps; 
    var progressPercent = Math.floor(progress*100) + '%'; 
    $child.css('background', 
     'linear-gradient(to right, ' + 
      'rgba(255,255,255,1) 0%, ' + 
      'rgba(255,255,255,' + progress + ') ' + progressPercent + ', ' + 
      'rgba(255,255,255,0) 100%)' 
    ); 
    setTimeout(animationStep, interval); 
}; 
animationStep();

Вы могли бы приспособить это более общее применение с точки зрения цвета, повторное использование на нескольких элементов, и т.д., но это должно дать вам основную идею.

источник

2014-01-08 04:23:10

Спасибо, Джейк! Гораздо сложнее, чем я мог себе представить, но он работает. – ryanb

Добро пожаловать. Я только что обновил ответ с немного более приятной версией, которая закончит полностью непрозрачную. У оригинала все еще была прозрачность при завершении. –

** + 1 ** Прекрасный способ подделать непрозрачность – Cilan

<head> 
    <meta charset="utf-8"> 

    <title>Animation</title> 

    <script src="js/jquery-2.0.3.min.js"></script> 
</head> 

<body> 
    <div id="mydiv" style="height:20px; width:49px; opacity:0.5; background-color:green;"> 
    </div> 

    <script> 
     $('#mydiv').hover(
      function(){ 
       $(this).animate({height:40,width:200,opacity:1}); 
      }, 
      function(){ 
       $(this).animate({height:20,width:100,opacity:0.5}); 
      } 
     ); 
    </script> 
</body>

источник

2014-01-08 03:48:22 user3116686

Спасибо за ответ. Однако это просто расширяет поле, я ищу только непрозрачность для изменения по div слева направо. – ryanb

jquery анимировать только непрозрачность слева направо

ответ

Смежные вопросы