Reputation: 1205

Append divs with style using JQuery

I am creating html elements using JQuery and appending them to the document, but I was wondering how I might be able to do it with style using something like on this page where it describes the "swinging in" animation down towards the bottom of page. https://cssanimation.rocks/list-items/

I am using a setInterval method to append the divs one by one slowly, but I tried the method described in website, but it does not work.

timer = (setInterval(addprojectsNow, 1000));

function addprojectsNow(){
    console.log("FIRSTCLICK ADDPROJECTS", firstClick);
    console.log("PROJECTS LINKS OBJECT", projectLinks);

        let newProject = $('<div style="display: none;" class="col-md-6">').attr('id', count);
        let innerDiv = $('<div class="portfolio-item well">');
        let heroku = $('<a href="' + projectLinks[count].project.herokuLink + '"' + ' target="_blank" class="col-md-12 col-sm-12 col-xs-12 col-lg-12"><h4><b>' + projectLinks[count].project.heroku + '</b></h4></a>');
        let github = $('<a href="' + projectLinks[count].project.githubLink + '"' + ' target="_blank" class="col-md-12 col-sm-12 col-xs-12 col-lg-12"><b><h4>Github Link</b></h4></a>');
        let img = $('<img style="border: solid; border-width: thin; border-style: dashed;" class="img-portfolio img-responsive" src="' + projectLinks[count].project.imgSRC + '"' + '>');
        innerDiv.append(heroku);
        innerDiv.append(github);
        innerDiv.append(img);
        newProject.append(innerDiv);



        $(newProject)addClass('show').appendTo('.portfolio-showcase').show('slow');


        return;
}

//The container the new <divs> are being appended to. The last nested divs has the '.swing' class.

<section id="portfolio" class="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center ">
                <h2>My Applications</h2>
                <hr class="medium bold">
                <div class="row portfolio-showcase swing">

/CSS

.swing {
  perspective: 500px;
}

.swing div.col-md-6 {
  opacity: 0;
  -webkit-transform: rotateX(-90deg);
  -webkit-transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

.swing div.show {
  opacity: 1;
  -webkit-transform: none;
  -webkit-transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

Upvotes: 0

Answers (6)

Michael Coker

Reputation: 53684

You define the initial styles, then overwrite them with a class that you add via jQuery and the overwriting class uses transition to create the effect. But you need to add the class in a setInterval so that the element is added to the DOM with the initial style, then receives the new style to transition, otherwise the element will get the new class too fast and the transition won't fire. Here's a demo.

$('button').on('click',function() {
  $newEl = $('<li>foo</li>');
  $('ul').append($newEl);
  setTimeout(function() {
    $newEl.addClass('show');
  })
})

li {
  list-style: none;
  background: #d1703c;
  border-bottom: 0 solid #fff;
  color: #fff;
  height: 0;
  padding: 0 0.5em;
  margin: 0;
  overflow: hidden;
  line-height: 2em;
  width: 10em;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
}

.show {
  height: 2em;
  border-width: 2px;
  opacity: 1;
  transform: none;
}

ul { 
  perspective: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>

<ul>
</ul>

Upvotes: 0

FrontEndDev

Reputation: 21

You can set up the item as you like before you append it

var newDiv = "

Upvotes: 1

lanlan.zheng

Reputation: 11

$(newProject).appendTo('.portfolio-showcase'); setTimeout(function(){$(newProject).addClass("show")},500)

Upvotes: 0

Mikołaj Osowski

Reputation: 118

try this

setInterval(function(){ 

    var newProject = $('<div style="display: none;" class="col-md-6">').attr('id', count);
    var innerDiv = $('<div class="portfolio-item well">');
    var heroku = $('<a href="' + projectLinks[count].project.herokuLink + '"' + ' target="_blank" class="col-md-12 col-sm-12 col-xs-12 col-lg-12"><h4><b>' + projectLinks[count].project.heroku + '</b></h4></a>');
    var github = $('<a href="' + projectLinks[count].project.githubLink + '"' + ' target="_blank" class="col-md-12 col-sm-12 col-xs-12 col-lg-12"><b><h4>Github Link</b></h4></a>');
    var img = $('<img style="border: solid; border-width: thin; border-style: dashed;" class="img-portfolio img-responsive" src="' + projectLinks[count].project.imgSRC + '"' + '>');
    innerDiv.append(heroku);
    innerDiv.append(github);
    innerDiv.append(img);
    newProject.append(innerDiv);

    newProject.addClass('show').appendTo('.portfolio-showcase').show('slow');

    return;

}, 1000);

Upvotes: 0