Question

我有背景图片，徽标和一些文字。徽标和文字需要淡入和滑动（方向相反），就像视频here：

这是一个类似的视频。我只是希望他们动画并停止。我并不需要它像视频中那样详细。

出于某种原因，我无法让我的形象做任何事情。它不会滑到任何地方。动画完成后，我希望它位于文本旁边。

此外，我的文字向右滑动，就像我想要的那样，但在向右移动之后，它会以丑陋的方式自动向左移动。我只想让它向右滑动并留在那里。谢谢你的帮助。

HTML＆amp; jQuery的：

       <!--Background image here -->
       <img src="path" width="some width" height="some height"/>
       <div class="centre">
            <div style="float: left;">
                <!--Logo Here-->
                <img src="http://placehold.it/350x150" id="myImage"/>
            </div>
            <div style="float:left;">
                <p id="first">The original SheerWeave fabric</p>
                <p id="second">Infused with Microban</p>
                <p id="third">GREENGUARD Certified</p>
                <p id="fourth">Available in 10 colors</p>
            </div>
        </div>
    <script>
        $(document).ready(function() {
            $('#myImage').animate({ 'right': '250'}, 16000);
            $('#first').animate({ 'left': '50', 'opacity': 1 }, 1600);
            $('#second').animate({ 'left': '50', 'opacity': 1 }, 1600);
            $('#third').animate({ 'left': '50', 'opacity': 1 }, 1600);
            $('#fourth').animate({ 'left': '50', 'opacity': 1 }, 1600);
        });
    </script>

CSS：

#first, #second, #third, #fourth{
    opacity: 0;
}

.centre {
    min-width: 500px;
    margin: auto;
    top: 125px;
    left: 350px;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 999;
}

Answer 1

试试这个：

<强> HTML ：

<!--Background image here -->
<div class="centre">
    <div id="image">
        <!--Logo Here-->
        <img src="http://placehold.it/350x150" id="myImage"/>
    </div>
    <span id="border"></span>
    <div id="text">
        <p id="first">The original SheerWeave fabric</p>
        <p id="second">Infused with Microban</p>
        <p id="third">GREENGUARD Certified</p>
        <p id="fourth">Available in 10 colors</p>
    </div>
</div>

CSS ：

.centre {
  display: table; 
  margin:0 auto;
}

#image {
  opacity: 0;
  display: table-cell;
  position: relative;
  margin-left: 0px;
  float:left;
}

#border {
border: 1px solid black;
  position: absolute;
  height: 150px;
  margin-left: -10px; 
  opacity: 0; 
}

#text {
  opacity: 0;
  position: relative;
  float: left;
  vertical-alignment: middle;
  display: table-cell; 
  margin-left: -220px;
}

JS ：

$(window).load(function() {
  $( "#image" ).animate({
    opacity: 1,
    marginRight: "0.3in"
  }, 1500 );

  $( "#text" ).animate({
    opacity: 1,
    marginLeft: "0.1in"
  }, 1500 );

    $( "#border" ).animate({
      opacity: 1
  }, 5500 );
});

请参阅 Example 。

Answer 2

您还可以使用图像上方的封面和具有不同z-index值的文本。

有两个隐藏文本和图像的叠加层（封面）。如果您将封面的不透明度值设置为较低的alpha，则可以检查其工作原理，然后您可以看到它们如何隐藏元素。

请查看下面的演示，并点击此处jsFiddle。

我认为在代码中有一点需要改进，那就是文本的垂直对齐方式。它没有居中。

$(document).ready(function () {

    $('.text>p').each(function (index, item) {
        //console.log(item, this);
        $(this).delay(100 + index * 200).animate({
            'left': '100%'
        },
        600 + index * 100,
            'easeInQuad');
    });
    $('.logo').animate({
        'left': '0',
        'opacity': '1.0'
    }, 800);
    //$('.coverLeft').delay(1600).animate({'opacity': '0.0'}, 1000); // not required because z-index is below image and above text
    $('.coverRight').delay(600).animate({
        'opacity': '0.0'
    }, 1000);


});

.logo {

    /*reveal from right to left*/

    position: absolute;

    left: 50%;

    width: 50%;

    text-align: right;

    opacity: 0.0;

    z-index: 7;

}

.wrapper {

    padding-top: 10px;

    margin: 0 auto;

    width: 100%;

    height: 100%;

}

body {

    overflow: hidden;

}

.text {

    /* reveal right */

    position: absolute;

    left: 0;

    width: 50%;

    /*display:table-cell;
    vertical-align:middle;*/

    opacity: 1.0;

    white-space: nowrap;

    z-index: 4;

    padding-left: 10px;

}

.text p {

    font-family: sans-serif;

    position: relative;

    /*line-height: 20px;*/

}

.coverLeft {

    position: absolute;

    background-color: #fff;

    left: 0;

    height: 100%;

    width: 50%;

    opacity: 1.0;

    z-index: 6;

}

.coverRight {

    position:absolute;

    right: 0;

    width: 50%;

    height: 100%;

    background-color: #fff;

    opacity: 1.0;

    z-index: 8;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="coverLeft"></div>
<div class="coverRight"></div>

<div class="wrapper">
    <div class="logo">
        <img src="http://lorempixel.com/200/200/fashion/9/" />
    </div>
    <div class="text">
        <p id="first">The original SheerWeave fabric</p>
        <p id="second">Infused with Microban</p>
        <p id="third">GREENGUARD Certified</p>
        <p id="fourth">Available in 10 colors</p>
    </div>
</div>
<!--Background image here -->
<!--<img src="path" width="some width" height="some height"/>-->
<!-- <div class="centre">
            <div style="float: left;">
-->
<!--Logo Here-->
<!-- <img src="http://placehold.it/350x150" id="myImage"/>
</div>
<div style="float:left;">
    <p id="first">The original SheerWeave fabric</p>
    <p id="second">Infused with Microban</p>
    <p id="third">GREENGUARD Certified</p>
    <p id="fourth">Available in 10 colors</p>
</div>
</div>-->

如何滑动图像＆amp;使用jquery同时使用文本

2 个答案: