Question

大家好我想为我的代码制作fadeInLeft效果，如何实现这一目标？我想将fadeIn效果更改为fadeInLeft或slideLeft效果。

<div>
                <img class="center-triangle animated slideInUp" src="http://i-marketing.loc/wp-content/uploads/2017/06/triangle-pyramid.png" alt="цели SMM" style="opacity: 1;">
            </div>
            <div class="right-info">
                <img id="caption_1" class="" src="http://i-marketing.loc/wp-content/uploads/2017/06/caption_1.png" alt="Имидж, лояльность, доверие">
                <img id="caption_2" class="" src="http://i-marketing.loc/wp-content/uploads/2017/06/caption_2.png" alt="Работа с негативом, обратная связь с клиентом, работа со СМИ">
                <img id="caption_3" class="" src="http://i-marketing.loc/wp-content/uploads/2017/06/caption_3.png" alt="Стимулирование продаж, охват и узнаваемость">
            </div>

使用此功能，我无法执行fadeInLeft效果 numberOfLines.first.fadeIn('slow');

    var numberOfLines = {
    first: $('#caption_1'),
    second: $('#caption_2'),
    third: $('#caption_3')
}

for (var key in numberOfLines) {
    numberOfLines[key].hide(); //numberOfLines[key] holds the `$('#caption_1')...` elements
}

$('.center-triangle').css({ 'position' : 'relative', 'left' : '25%' });
$('.center-triangle').click(function () {
    $(this).animate({
    'left' : '50px'
    }, 500, 'linear',
        function () {
            numberOfLines.first.fadeIn('slow');
            numberOfLines.second.fadeIn('slow');
            numberOfLines.third.fadeIn('slow');
        }
    );//end function animate
});

Answer 1

试试这个：

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

如何制作fadeInLeft效果？

1 个答案: