Jump to content
Sign in to follow this  
jonathanrn

Animação básica Jquery/Javascript

Recommended Posts

 

Fala galera, blz?

Estou começando a estudar jquery para fazer uma basica animação no site que estou criando para o meu pai.

A animação envolve fade de imagens (fadeIn, fadeOut) e uma movimentação básica. segue um exemplo do que eu quero fazer:
1 - primeiraParte entra com fade e sai com fade;
2 - segundaParte entra primeiro a imagem central, depois imageEsquerda e imagem direita (nessa ordem, ambas em fade);
3 - imagemEsquerda e imagemDireita se movem para baixo da imagem central;
4 - Saide em fade da segundaParte;
Então, quais as funções tenho que estudar primeiro já que eu quero entregar isso para o meu pai? Ajuda também me passando assuntos de outros tópicos sobre o que irei ter que utilizar para tal feito.
Obs.: Tenho experiencia apenas em html e css.
Desde já agradeço!
<div id="primeiraParte"> 
	<img src="../Imagens/logo.png">
</div>


<div id="segundaParte">

    <div class="imagemEsquerda">
        <img src="../Icons/esquerda.png">
    </div>
    
    <div class="imagemCentral">
        <img src="../Imagens/project.png">
    </div>
    
    <div class="imagemDireita">
        <img src="../Icons/direita.png">
    </div>

</div> 

Share this post


Link to post
Share on other sites

Show, estou usando bastante

 

ja até adicionei essa parte na primeira imagem:

$(function(){
    $(".logo").fadeIn(2000, function(){
        window.setTimeout(function(){
            $('.logo').fadeOut(2000);
        }, 3000);				
    });
});

Agora como eu faço para a segunda imagem começar a ser executada so após o fim desta?

Share this post


Link to post
Share on other sites

Boa esta função promise(), mas eu mudei um pouco o código rsrs. Na segunda página onde tenho 18 imagens utilizei css3 keyframes para fazer o fadeIn, só que no css não tem como eu determinar que é para cada imagem começar a transição 'uma após a outra'. Tem como o Jquery dar uma força nessa parte de 'um de cada vez'?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By gersonab
      Boa tarde, tenho uma página de pesquisa com vários campos, podendo usar um apenas para pesquisa, fica a critério da pessoa, o que acontece é que todos os campos quando se faz o autocomplete ele envia a pesquisa pelo id, porém se eu enviar o campo em vazio o formulário envia assim mesmo a pesquisa, gostaria que só enviasse caso estivesse com o id.
      segue o formulário:
      <h4>Localizar por ...</h4> <form role="form" action="listcliente.php" method="GET" autocomplete='off'> <div class="form-row mb-4"> <div class="form-group col-md-12"> <label>Nome ou ...</label> <input type="text" name="nomec" id="nomec" class="form-control" style="text-transform: uppercase;"> <input type="hidden" name="idc" id="idc"> </div> </div> <div class="form-row mb-4"> <div class="form-group col-md-4"> <label>CPF ou ...</label> <input type="text" name="cpfc" id="cpfc" class="form-control"> </div> <div class="form-group col-md-4"> <label>CNPJ ou ...</label> <input type="text" name="cnpj" id="cnpj" class="form-control"> </div> <div class="form-group col-md-4"> <label>Data de nascimento</label> <input type="text" name="datan" id="datan" class="form-control"> </div> </div> <input type="submit" name="Localizar" value="Localizar" class="btn btn-primary mt-3"> </form> o autocomplete, apenas um de exemplo.
      $( "#nomec" ).autocomplete({ minLength: 2, source: function( request, response ) { $.ajax({ url: "../lista/autocli.php", type: 'post', dataType: "json", data: { search: request.term }, success: function( data ) { response( data ); } }); }, select: function (event, ui) { $('#nomec').val(ui.item.label); // display the selected text $('#idc').val(ui.item.value); // save selected id to input return false; } }); a página autocli.php
      <?php require_once('config.php'); if(isset($_POST['search'])){ $search = $_POST['search']; $query = "SELECT nomec, idc FROM cli WHERE nomec LIKE '%".$search."%'"; $result = mysqli_query($con,$query); $response = array(); while($row = mysqli_fetch_array($result) ){ $response[] = array("value"=>$row['idc'],"label"=>$row['nomec']); } echo json_encode($response); } exit; ?> desde já agradeço a ajuda.
    • By emmanuelsiqueira30
      Pessoal boa tarde.
      Gostaria de saber como posso pegar os valores da linha na tabela <table> que eu clicar no link visualizar dados na coluna opções e aparecer dados do banco daquela linha.
       
       
       
       
    • By gersonab
      Bom dia, tenho 2 tabelas editáveis em uma div, estas funcionam normalmente, o problema é que o loop não acontece , só carrega sobre 1 item, sendo que este eu posso ter mais itens.
       na página principal tenho:
      <div class="carregadados"></div> function fetch_data() { $.ajax({ url:"../lista/finan.php", method:"POST", success:function(data){ $('.carregadados').html(data); } }); } fetch_data(); a página a ser carregada esta assim:
      <?php session_start(); require_once('config.php'); $output = ''; $idc1=$_SESSION['idc']; $sql01 = "SELECT * FROM porcent WHERE idfcli='$idc1'"; $result = mysqli_query($con, $sql01); while($user41 = mysqli_fetch_array($result)){ // primeiro while onde seleciono os itens da pessoa podendo ter vários $output .= ' <div class="table-responsive mb-4 mt-4"> Aqui vem os dados da pessoa '; $id1= $user41["idproc"]; $sqladv = "SELECT * FROM poradv WHERE procav='$id1'"; $resulta = mysqli_query($con, $sqladv); $output .= ' <table class="table table-bordered table-hover table-striped" style="width:100%"> <thead> <tr> </tr> </thead> <tbody>'; if(mysqli_num_rows($resulta) > 0) { while($usera = mysqli_fetch_array($resulta)){ //segundo while onde tenho os dados de venda em uma tabela editavel $output .= ' <tr> </tr>'; } $output .= ' <tr> // insiro linhas caso precise </tr> '; } else { $output .= '<tr> // caso não tenha nada inserido, posso fazer por aqui </tr> '; } $output .= '</tbody> </table>'; $id2= $user41["idproc"]; $sql = "SELECT * FROM parcelas WHERE procid='$id2' ORDER BY datapar, idpar ASC"; $result = mysqli_query($con, $sql); $output .= ' <table class="table table-bordered table-hover table-striped" style="width:100%"> <thead> <tr> // tabela de pagamentos editavel </tr> </thead> <tbody>'; if(mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_array($result)) { //terceiro while , tabela referente a pagamentos $output .= ' <tr> // tabela pagamentos </tr>'; } $output .= ' <tr> // insiro linhas caso precise </tr> '; } else { $output .= '<tr> // caso não tenha nada inserido, posso fazer por aqui </tr> '; } $output .= '</tbody> </table> </div> '; } echo $output; ?> só esta carregando uma vez , tudo dentro da parte editável esta funcionando, porém no primeiro while só faz 1 loop, os demais estão funcionando perfeitamente.
      desde já agradeço qualquer ajuda.
    • By mamotinho
      Olá, gostaria de sabe como posso fazer uma contagem regressiva apartir de um registro em meu banco de dados eu tentei montar um código da seguinte forma:

       
      <? $DateGET = date('m/d/Y H:i A', strtotime($result->DateDiscount)); ?> <script> var valueDate = <?=$DateGET?>; var end = new Date(valueDate); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); document.getElementById("countdown").innerHTML = "EXPIRED!"; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById("countdown").innerHTML = "<span class='n_date day' id='days'>" + days + "</span><span class='date'>일</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time hour' id='hrs'>" + hours + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time minute' id='minus'>" + minutes + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time second' id='secs'>" + seconds + "</span>"; } timer = setInterval(showRemaining, 1000); </script> Mais infelizmente não passou a data registrada no banco de dados, alguém teria ideia de como posso ta fazendo.
    • By alysson122010
      Galera estou com um sistema de jcrop que quando eu coloco imagem jpg e jpeg ele funciona de boa porem quando coloco png a imagem fica toda preta e salva preta.
       
      PHP que salva
       

      <?php
      /*********************************************************************
           Purpose            : update image.
           Parameters         : null
           Returns            : integer
           ***********************************************************************/
           $post = isset($_POST) ? $_POST: array();
           //print_R($post);die;
           switch($post['action']) {
            case 'save' :
              saveAvatarTmp();
            break;
            default:
              changeAvatar();
              
           }
          
           function changeAvatar() {
              $post = isset($_POST) ? $_POST: array();
              $max_width = "500"; 
              $userId = isset($post['hdn-profile-id']) ? intval($post['hdn-profile-id']) : 0;
              $path = 'images/tmp';
              $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
              $name = $_FILES['photoimg']['name'];
              $size = $_FILES['photoimg']['size'];
              if(strlen($name))
              {
              list($txt, $ext) = explode(".", $name);
              if(in_array($ext,$valid_formats))
              {
              if($size<(1024*1024)) // Image size max 1 MB
              {
              $actual_image_name = 'avatar' .'_'.$userId .'.'.$ext;
              $filePath = $path .'/'.$actual_image_name;
              $tmp = $_FILES['photoimg']['tmp_name'];
              
              if(move_uploaded_file($tmp, $filePath))
              {
              $width = getWidth($filePath);
                  $height = getHeight($filePath);
                  //Scale the image if it is greater than the width set above
                  if ($width > $max_width){
                      $scale = $max_width/$width;
                      $uploaded = resizeImage($filePath,$width,$height,$scale);
                  }else{
                      $scale = 1;
                      $uploaded = resizeImage($filePath,$width,$height,$scale);
                  }
              /*$res = saveAvatar(array(
                              'userId' => isset($userId) ? intval($userId) : 0,
                                                      'avatar' => isset($actual_image_name) ? $actual_image_name : '',
                              ));*/
                              
              //mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
              echo "<img id='photo' file-name='".$actual_image_name."' class='' src='".$filePath.'?'.time()."' class='preview'/>";
              }
              else
              echo "failed";
              }
              else
              echo "Image file size max 1 MB"; 
              }
              else
              echo "Invalid file format.."; 
              }
              else
              echo "Please select image..!";
              exit;
              
              
          }
          /*********************************************************************
           Purpose            : update image.
           Parameters         : null
           Returns            : integer
           ***********************************************************************/
           function saveAvatarTmp() {
              $post = isset($_POST) ? $_POST: array();
              $userId = isset($post['id']) ? intval($post['id']) : 0;
              $path ='\\images\uploads\tmp';
              $t_width = 300; // Maximum thumbnail width
              $t_height = 300;    // Maximum thumbnail height
              
          if(isset($_POST['t']) and $_POST['t'] == "ajax")
          {
              extract($_POST);
              
              //$img = get_user_meta($userId, 'user_avatar', true);
              $imagePath = 'images/tmp/'.$_POST['image_name'];
              $ratio = ($t_width/$w1); 
              $nw = ceil($w1 * $ratio);
              $nh = ceil($h1 * $ratio);
              $nimg = imagecreatetruecolor($nw,$nh);
              $im_src = imagecreatefromjpeg($imagePath);
              imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w1,$h1);
              imagejpeg($nimg,$imagePath,90);
              
          }
          echo $imagePath.'?'.time();;
          exit(0);    
          }
          
          /*********************************************************************
           Purpose            : resize image.
           Parameters         : null
           Returns            : image
           ***********************************************************************/
          function resizeImage($image,$width,$height,$scale) {
          $newImageWidth = ceil($width * $scale);
          $newImageHeight = ceil($height * $scale);
          $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
          $source = imagecreatefromjpeg($image);
          imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
          imagejpeg($newImage,$image,90);
          chmod($image, 0777);
          return $image;
      }
      /*********************************************************************
           Purpose            : get image height.
           Parameters         : null
           Returns            : height
           ***********************************************************************/
      function getHeight($image) {
          $sizes = getimagesize($image);
          $height = $sizes[1];
          return $height;
      }
      /*********************************************************************
           Purpose            : get image width.
           Parameters         : null
           Returns            : width
           ***********************************************************************/
      function getWidth($image) {
          $sizes = getimagesize($image);
          $width = $sizes[0];
          return $width;
      }
      ?>
       
       
      Jquery
       
      <script type="text/javascript">
              jQuery(document).ready(function(){
              
              jQuery('#change-pic').on('click', function(e){
                  jQuery('#changePic').show();
                  jQuery('#change-pic').hide();
                  
              });
              
              jQuery('#photoimg').on('change', function()   
              { 
                  jQuery("#preview-avatar-profile").html('');
                  jQuery("#preview-avatar-profile").html('Uploading....');
                  jQuery("#cropimage").ajaxForm(
                  {
                  target: '#preview-avatar-profile',
                  success:    function() { 
                          jQuery('img#photo').imgAreaSelect({
                          aspectRatio: '1:1',
                          onSelectEnd: getSizes,
                      });
                      jQuery('#image_name').val(jQuery('#photo').attr('file-name'));
                      }
                  }).submit();
              });
              
              jQuery('#btn-crop').on('click', function(e){
              e.preventDefault();
              params = {
                      targetUrl: 'profile.php?action=save',
                      action: 'save',
                      x_axis: jQuery('#hdn-x1-axis').val(),
                      y_axis : jQuery('#hdn-y1-axis').val(),
                      x2_axis: jQuery('#hdn-x2-axis').val(),
                      y2_axis : jQuery('#hdn-y2-axis').val(),
                      thumb_width : jQuery('#hdn-thumb-width').val(),
                      thumb_height:jQuery('#hdn-thumb-height').val()
                  };
                  saveCropImage(params);
              });
              
           
              
              function getSizes(img, obj)
              {
                  var x_axis = obj.x1;
                  var x2_axis = obj.x2;
                  var y_axis = obj.y1;
                  var y2_axis = obj.y2;
                  var thumb_width = obj.width;
                  var thumb_height = obj.height;
                  if(thumb_width > 0)
                      {
                          jQuery('#hdn-x1-axis').val(x_axis);
                          jQuery('#hdn-y1-axis').val(y_axis);
                          jQuery('#hdn-x2-axis').val(x2_axis);
                          jQuery('#hdn-y2-axis').val(y2_axis);
                          jQuery('#hdn-thumb-width').val(thumb_width);
                          jQuery('#hdn-thumb-height').val(thumb_height);
                          
                      }
                  else
                      alert("Please select portion..!");
              }
              
              function saveCropImage(params) {
              jQuery.ajax({
                  url: params['targetUrl'],
                  cache: false,
                  dataType: "html",
                  data: {
                      action: params['action'],
                      id: jQuery('#hdn-profile-id').val(),
                       t: 'ajax',
                                          w1:params['thumb_width'],
                                          x1:params['x_axis'],
                                          h1:params['thumb_height'],
                                          y1:params['y_axis'],
                                          x2:params['x2_axis'],
                                          y2:params['y2_axis'],
                                          image_name :jQuery('#image_name').val()
                  },
                  type: 'Post',
                 // async:false,
                  success: function (response) {
                          jQuery('#changePic').hide();
                          jQuery('#change-pic').show();
                          jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');
                          
                          jQuery("#avatar-edit-img").attr('src', response);
                          jQuery("#preview-avatar-profile").html('');
                          jQuery("#photoimg").val('');
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
                  }
              });
              }
              });
          </script>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.