javascript - Slide some contents of a page on load - Stack Overflow

admin管理员组

文章数量:1022476

I am totally new to jQuery and starting out basically so please forgive if this question sounds amateurish or stupid. Any how I want to the header and footer of the page to remain static but the center contents of the page to slide in from the right side when page loads. Here is the page which does exactly that : flooring-by-design

I have looked into slide down function of jQuery and animate function but slidedown slides from top-bottom and I don't want that. What should I do?

My content goes like this:

<div class="container">
    <h1 class='logo'>Site Name</h1>
    <div class='bcontent'>
        <div id="one">One Content</div>
        <div id="two">Two</div>
        <div id="three">Three</div>
    </div>
    <footer>Copy rights</footer>
</div>

Div one two and three are the ones which I want to slide in nicely on page load. Just like the example link.

I am totally new to jQuery and starting out basically so please forgive if this question sounds amateurish or stupid. Any how I want to the header and footer of the page to remain static but the center contents of the page to slide in from the right side when page loads. Here is the page which does exactly that : flooring-by-design.

I have looked into slide down function of jQuery and animate function but slidedown slides from top-bottom and I don't want that. What should I do?

My content goes like this:

<div class="container">
    <h1 class='logo'>Site Name</h1>
    <div class='bcontent'>
        <div id="one">One Content</div>
        <div id="two">Two</div>
        <div id="three">Three</div>
    </div>
    <footer>Copy rights</footer>
</div>

Div one two and three are the ones which I want to slide in nicely on page load. Just like the example link.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 8, 2015 at 12:24 Harry 89.9k2626 gold badges214214 silver badges223223 bronze badges asked Aug 12, 2013 at 10:41 Ahmar AliAhmar Ali 1,07888 gold badges2828 silver badges5353 bronze badges 3

• you could also have a look at bxslider – Jake Aitchison Commented Aug 12, 2013 at 10:46
• I think this question is what you're looking for. stackoverflow./questions/596608/slide-right-to-left – patricia Commented Aug 12, 2013 at 10:49
• If I understand it properly it is a slider for image and content I don't want slider I only want to animate some content on page load @milkshake – Ahmar Ali Commented Aug 12, 2013 at 10:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can do this using jQuery.

Basically the content is set at an offset of 800px from the left initially using CSS. Then using jQuery animate, we slide-in the contents till the offset from left is 0px. You can increase or decrease the duration to alter the speed of the slide-in.

jQuery

$(document).ready(function() {

    $("#one").animate({left: "0"}, {
    duration: 2000       
    });
    $("#two").animate({left: "0"}, {
    duration: 2250
    });
    $("#three").animate({left: "0"}, {
    duration: 2500        
    });
});

CSS

.bcontent > div{
    position: relative;
    display: inline-block; /* to display the 3 div's in same line */
    height: 200px; /* height, width and border just added for demo, not mandatory */
    width: 100px;
    border: 1px solid black;
    left: 110%; /* Added to avoid the width issue pointed out by DRP96 */
}
.bcontent{
    width: 100%;
    overflow: hidden; /* added to make the content hidden initially and avoid scroll-bar */
}

$(document).ready(function() {
  $("#one").animate({
    left: "0"
  }, {
    duration: 2000
  });
  $("#two").animate({
    left: "0"
  }, {
    duration: 2250
  });
  $("#three").animate({
    left: "0"
  }, {
    duration: 2500
  });
});

footer {
  bottom: 0px;
  font-size: 20px;
}
.bcontent {
  width: 100%;
  overflow: hidden;
}
.bcontent > div {
  position: relative;
  display: inline-block;
  height: 200px;
  width: 100px;
  left: 110%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="row">

  <h1 class='logo'>Site Name</h1>

  <div class='bcontent'>
    <div id="one" class="span4">One Content</div>
    <div id="two" class="span4">Two</div>
    <div id="three" class="span4">Three</div>
  </div>
  <footer>Copy rights</footer>
</div>

<div class="container">
<h1 class='logo'>Site Name</h1>

<div class='bcontent'>
<div id="one">One Content</div>
<div id="two">Two</div>
<div id="three">Three</div>
 </div>

<footer>Copy rights</footer>

 </div>

for the above html you can refer to the **demo

I am totally new to jQuery and starting out basically so please forgive if this question sounds amateurish or stupid. Any how I want to the header and footer of the page to remain static but the center contents of the page to slide in from the right side when page loads. Here is the page which does exactly that : flooring-by-design

I have looked into slide down function of jQuery and animate function but slidedown slides from top-bottom and I don't want that. What should I do?

My content goes like this:

<div class="container">
    <h1 class='logo'>Site Name</h1>
    <div class='bcontent'>
        <div id="one">One Content</div>
        <div id="two">Two</div>
        <div id="three">Three</div>
    </div>
    <footer>Copy rights</footer>
</div>

Div one two and three are the ones which I want to slide in nicely on page load. Just like the example link.

I am totally new to jQuery and starting out basically so please forgive if this question sounds amateurish or stupid. Any how I want to the header and footer of the page to remain static but the center contents of the page to slide in from the right side when page loads. Here is the page which does exactly that : flooring-by-design.

I have looked into slide down function of jQuery and animate function but slidedown slides from top-bottom and I don't want that. What should I do?

My content goes like this:

<div class="container">
    <h1 class='logo'>Site Name</h1>
    <div class='bcontent'>
        <div id="one">One Content</div>
        <div id="two">Two</div>
        <div id="three">Three</div>
    </div>
    <footer>Copy rights</footer>
</div>

Div one two and three are the ones which I want to slide in nicely on page load. Just like the example link.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 8, 2015 at 12:24 Harry 89.9k2626 gold badges214214 silver badges223223 bronze badges asked Aug 12, 2013 at 10:41 Ahmar AliAhmar Ali 1,07888 gold badges2828 silver badges5353 bronze badges 3

• you could also have a look at bxslider – Jake Aitchison Commented Aug 12, 2013 at 10:46
• I think this question is what you're looking for. stackoverflow./questions/596608/slide-right-to-left – patricia Commented Aug 12, 2013 at 10:49
• If I understand it properly it is a slider for image and content I don't want slider I only want to animate some content on page load @milkshake – Ahmar Ali Commented Aug 12, 2013 at 10:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can do this using jQuery.

Basically the content is set at an offset of 800px from the left initially using CSS. Then using jQuery animate, we slide-in the contents till the offset from left is 0px. You can increase or decrease the duration to alter the speed of the slide-in.

jQuery

$(document).ready(function() {

    $("#one").animate({left: "0"}, {
    duration: 2000       
    });
    $("#two").animate({left: "0"}, {
    duration: 2250
    });
    $("#three").animate({left: "0"}, {
    duration: 2500        
    });
});

CSS

.bcontent > div{
    position: relative;
    display: inline-block; /* to display the 3 div's in same line */
    height: 200px; /* height, width and border just added for demo, not mandatory */
    width: 100px;
    border: 1px solid black;
    left: 110%; /* Added to avoid the width issue pointed out by DRP96 */
}
.bcontent{
    width: 100%;
    overflow: hidden; /* added to make the content hidden initially and avoid scroll-bar */
}

$(document).ready(function() {
  $("#one").animate({
    left: "0"
  }, {
    duration: 2000
  });
  $("#two").animate({
    left: "0"
  }, {
    duration: 2250
  });
  $("#three").animate({
    left: "0"
  }, {
    duration: 2500
  });
});

footer {
  bottom: 0px;
  font-size: 20px;
}
.bcontent {
  width: 100%;
  overflow: hidden;
}
.bcontent > div {
  position: relative;
  display: inline-block;
  height: 200px;
  width: 100px;
  left: 110%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="row">

  <h1 class='logo'>Site Name</h1>

  <div class='bcontent'>
    <div id="one" class="span4">One Content</div>
    <div id="two" class="span4">Two</div>
    <div id="three" class="span4">Three</div>
  </div>
  <footer>Copy rights</footer>
</div>

<div class="container">
<h1 class='logo'>Site Name</h1>

<div class='bcontent'>
<div id="one">One Content</div>
<div id="two">Two</div>
<div id="three">Three</div>
 </div>

<footer>Copy rights</footer>

 </div>

for the above html you can refer to the **demo

本文标签： javascriptSlide some contents of a page on loadStack Overflow