CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Uptop 14
Uptop 14

Reputation: 221

JavaScript or CSS: How can I make a transition of one element to another?

I'm working on my custom home page and I'd like to make a transition of one element to another.

Here's my HTML code:

                <div id="index-features">
                    <ul>
                        <li>
                            <h5 id="feature-1" class="feature-title">Instant access</h5>
                            <span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
                        </li>
                        <li>
                            <h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
                            <span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
                        </li>
                        <li>
                            <h5 id="feature-3" class="feature-title">Modern techniques</h5>
                            <span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
                        </li>
                        <li>
                            <h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
                            <span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
                        </li>
                        <li>
                            <h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
                            <span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
                            <span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
                        </li>
                        <li>
                            <h5 id="feature-7" class="feature-title">High quality support</h5>
                            <span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the <a href="#" target="_blank" style="border-bottom: 2px solid;">support forum</a> so that we can fix your problem very quickly.</span>
                        </li>
                        <li>
                            <h5 id="feature-8" class="feature-title">Custom framework</h5>
                            <span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
                        </li>
                        <li>
                            <h5 id="feature-9" class="feature-title">Extra features</h5>
                            <span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
                        </li>
                        <li>
                            <h5 id="feature-10" class="feature-title">Test title</h5>
                            <span id="feature-10-description" class="feature-description">Test</span>
                        </li>
                    </ul>
                </div>

CSS:

#index-features
{
    position: relative;
    margin-top: 15px;
    text-align: center;
}

#index-features li
{
    border-bottom: #CCCCCC 1px solid;
    margin: 0 -20px 20px -20px;
    padding: 0 20px; 0 20px;
}

#index-features ul:last-child li:last-child
{
    border-bottom: none;
}

.feature-title
{
    display: inline-block;
    font-weight: bold;
}

.feature-title:before
{
    content: "";
    float: left;
    background: url("../images/index-features-sprite.png") no-repeat;
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.feature-description
{
    display: block;
    margin: 0 0 20px 37px;
}

#feature-1:before
{
    background-position: 0 0;
}

#feature-2:before
{
    background-position: -32px 0;
}

#feature-3:before
{
    background-position: -64px 0;
}

#feature-4:before
{
    background-position: 0 -32px;
}

#feature-5:before
{
    background-position: -32px -32px;
}

#feature-6:before
{
    background-position: 0 -64px;
}

#feature-7:before
{
    background-position: -32px -64px;
}

#feature-8:before
{
    background-position: -64px -32px;
}

#feature-9:before
{
    background-position: -64px -64px;
}

As you can see, I've two ul tag and what I want is to do a transition of the first ul to the other ul: http://prntscr.com/7ftax4 and the second ul: http://prntscr.com/7ftba6

The idea would be that the first ul is displayed and after 10 seconds, second ul passes over the first ul.

How can I do it with JavaScript or CSS please?

Upvotes: 0

Views: 236

Answers (2)

Jackson
Jackson

Reputation: 3518

Here is a piece of jQuery which will successively add an active class over the <ul> elements. Then using CSS the <ul> elements can be hidden and shown when the .active class is applied

$(function(){
  $('#index-features ul').first().addClass('active');
  setInterval(loop,10000);
  
  function loop(){
    var $active=$('ul.active');
    var $next=$active.nextAll('ul').first();
    if($next.length===0)$next=$active.prevAll('ul').last();
    $active.removeClass('active')
    $next.addClass('active');
  }
});
#index-features
{
    position: relative;
    margin-top: 15px;
    text-align: center;
}

#index-features li
{
    border-bottom: #CCCCCC 1px solid;
    margin: 0 -20px 20px -20px;
    padding: 0 20px; 0 20px;
}

#index-features ul:last-child li:last-child
{
    border-bottom: none;
}

.feature-title
{
    display: inline-block;
    font-weight: bold;
}

.feature-title:before
{
    content: "";
    float: left;
    background: url("../images/index-features-sprite.png") no-repeat;
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.feature-description
{
    display: block;
    margin: 0 0 20px 37px;
}

#feature-1:before
{
    background-position: 0 0;
}

#feature-2:before
{
    background-position: -32px 0;
}

#feature-3:before
{
    background-position: -64px 0;
}

#feature-4:before
{
    background-position: 0 -32px;
}

#feature-5:before
{
    background-position: -32px -32px;
}

#feature-6:before
{
    background-position: 0 -64px;
}

#feature-7:before
{
    background-position: -32px -64px;
}

#feature-8:before
{
    background-position: -64px -32px;
}

#feature-9:before
{
    background-position: -64px -64px;
}

#index-features ul {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
#index-features ul.active {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="index-features">
                    <ul>
                        <li>
                            <h5 id="feature-1" class="feature-title">Instant access</h5>
                            <span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
                        </li>
                        <li>
                            <h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
                            <span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
                        </li>
                        <li>
                            <h5 id="feature-3" class="feature-title">Modern techniques</h5>
                            <span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
                        </li>
                        <li>
                            <h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
                            <span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
                        </li>
                        <li>
                            <h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
                            <span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
                            <span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
                        </li>
                        <li>
                            <h5 id="feature-7" class="feature-title">High quality support</h5>
                            <span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the <a href="#" target="_blank" style="border-bottom: 2px solid;">support forum</a> so that we can fix your problem very quickly.</span>
                        </li>
                        <li>
                            <h5 id="feature-8" class="feature-title">Custom framework</h5>
                            <span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
                        </li>
                        <li>
                            <h5 id="feature-9" class="feature-title">Extra features</h5>
                            <span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
                        </li>
                        <li>
                            <h5 id="feature-10" class="feature-title">Test title</h5>
                            <span id="feature-10-description" class="feature-description">Test</span>
                        </li>
                      </ul>
                </div>

Upvotes: 1

Michelangelo
Michelangelo

Reputation: 5958

This can be done with pure CSS, but you need animation and animation delay. I have made a fiddle where one div will be covered by another div after 10 seconds so be patient: http://jsfiddle.net/Lcek5s21/

#number1, #number2 {
        height:100px;
        width: 100px;
    }
#number1 {
        background-color:red;
    }
#number2 {
        background-color:green;
        -webkit-animation: mymove 3s infinite;/* Chrome, Safari, Opera */
        -webkit-animation-delay: 10s;/* Chrome, Safari, Opera */
        animation: mymove 3s infinite;
        animation-delay: 10s;
        position:relative;
        opacity:0;
    }
@-webkit-keyframes mymove {
        0% {
            top: 0px;
            opacity: 0;
        }
        100% {
            top: -100px;
            opacity: 1;
        }
    }
/* Standard syntax */
@keyframes mymove {
        0% {
            top: 0px;
            opacity: 0;
        }
    100% {
        top: -100px;
        opacity: 1;
    }
}

Upvotes: 1

Related Questions