如何幻灯片图片&文本同时使用jquery [英] How to slide images & text at the same time using jquery

问题描述

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

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

由于某些原因，我无法让我的图片做任何事情。它不滑动任何地方。当动画完成时，我想让它坐在文本旁边。

此外，我的文字向右滑动，就像我想要的一样，自动地以丑陋的方式向后退。我只是想让它向右滑动并留在那里。感谢您的帮助。

HTML& jQuery：

 <！ -  Background image here  - > 
< img src =pathwidth =some widthheight =some height/> 
< div class =center> 
< div style =float：left;> 
<！ -  Logo Here  - > 
< img src =http://placehold.it/350x150id =myImage/> 
< / div> 
< div style =float：left;> 
< p id =first>原始SheerWeave面料< / p> 
< p id =second>注入Microban< / p> 
< p id =third> GREENGUARD认证< / p> 
< p id =fourth>有10种颜色可供选择< / p> 
< / div> 
< / div> 
< script> 
 $（document）.ready（function（）{
 $（'＃myImage'）。animate（{'right'：'250'}，16000）; 
 $ first'）。animate（{'left'：'50'，'opacity'：1}，1600）; 
 $（'＃second'）。animate（{'left'：'50' '：1}，1600）; 
 $（'＃third'）。animate（{'left'：'50'，'opacity'：1}，1600）; 
 $ '）.animate（{'left'：'50'，'opacity'：1}，1600）; 
}）; 
< / script> 
  

CSS：

 code> #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; 
} 
  

解决方案

>

HTML ：

 此处的背景图片 - > 
< div class =center> 
< div id =image> 
<！ -  Logo Here  - > 
< img src =http://placehold.it/350x150id =myImage/> 
< / div> 
< span id =border>< / span> 
< div id =text> 
< p id =first>原始SheerWeave面料< / p> 
< p id =second>注入Microban< / p> 
< p id =third> GREENGUARD认证< / p> 
< p id =fourth>有10种颜色可供选择< / 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） ; 
}）; 
  

请参阅 示例 。

I have a background image, a logo, and some text. The logo and text need to fade in and slide (in opposite directions), just like the video here:

Here is a video that does something similar. I just want them to animate in and stop. i don't need it to be as detailed as in the video.

For some reason I cannot get my image to do anything. It does not slide anywhere. When the animation is done, I want it to sit next to the text.

Also, my text slides to the right like I want, but after it moves right, it automatically sends itself back left in an ugly way. I just want it to slide right and stay there. Thanks for the help.

HTML & 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;
}

解决方案

Try this:

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 );
});

See Example.

这篇关于如何幻灯片图片&文本同时使用jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！