Jquery动画/ fadeIn / fadeOut

时间:2015-04-01 18:16:42

标签: javascript jquery html css animation

我是完整的新手,在前端做我的第一步。我花了大部分时间研究一些动画功能,但无法完成,下面是HTML,CSS和Javascript代码:

     <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Белточчо</title>
  <link rel="stylesheet" href="main.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>




</head>
<body>

<header>
<img class="logo" src="images/logo_green.jpg" alt="logo">
<div class="top-contacts">
  <h1> Belltocco Company</h1>
  <p> Paper production of all kinds in Kaliningrad</p>
  <div class="details">
  <img src="images/phone.png" alt="phone icon" width="25px"> <p>+7(4012)778080</p>
  <img src="images/map_locator.png" alt="map icon" width="25px"> <p>25 Kant str. Kaliningrad</p> 
   <img src="images/mail.png" alt="mail icon" width="25px"> <p>info@beltocco.ru</p> 
  </div>
  </div>
</header>
        <section>
        <div class="product">
        <div class="viewport-first" id="viewport1">

        <a href="#">
                <span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
                <img src="images/discharger.jpg" alt="discharger">
            </a>

            </div>

         <div class="viewport" id="viewport2">   

         <a href="#">
                <span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
                <img src="images/napkin-table.jpg" alt="napkin-table">
            </a>

            </div>

            <div class="viewport" id="viewport3"> 

         <a href="#">
                <span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
                <img src="images/napkin.jpg" alt="napkin">
            </a>
            </div>

            <div class="viewport" id="viewport4"> 

         <a href="#">
                <span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
                <img src="images/toilet_paper.jpg" alt="toilet">

            </a>
        </div>



        <div class="clear"></div>

        <script>
        var clicked = true;

        $(document).ready(function() {
            $('.viewport').mouseenter(function(e) {
                if (clicked) {
                    $(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
                    $(this).children('a').children('span').fadeIn(200);
                }
            }).mouseleave(function(e) {
                if (clicked) {
                    $(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
                    $(this).children('a').children('span').fadeOut(20);
                }
            });
        });

        $(document).ready(function() {
            $('.viewport-first').mouseenter(function(e) {
                if (clicked) {
                    $(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
                    $(this).children('a').children('span').fadeIn(200);
                }
            }).mouseleave(function(e) {
                if (clicked) {
                    $(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
                    $(this).children('a').children('span').fadeOut(50);
                }
            });
        });

        function animate(a)
        {
            clicked = false;
            $('#viewport1').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
            $('#viewport2').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
            $('#viewport3').animate({height: '125', left: '-230', top: '135', width: '100'}, 100);
            $('#viewport4').animate({height: '125', left: '-230', top: '135', width: '100'}, 100);
            $('#viewport1').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
            $('#viewport1').children('a').children('span').fadeOut(50);
            $('#viewport2').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
            $('#viewport2').children('a').children('span').fadeOut(50);
            $('#viewport3').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
            $('#viewport3').children('a').children('span').fadeOut(50);
            $('#viewport4').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
            $('#viewport4').children('a').children('span').fadeOut(50);

        }

        $(document).ready(function() {
            $('#viewport1').click(function() {animate(1)});
            $('#viewport2').click(function() {animate(2)});
            $('#viewport3').click(function() {animate(3)});
            $('#viewport4').click(function() {animate(4)});
        });

        </script>


        </div>
        </section>


    /* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
      License: none (public domain)
    */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    header {
        background:#FFF;
        top: 0;
        width:1280px;
        padding:0px;
        height: 220px;
        margin-left:0;
    }

    .logo {
      margin-left:200px;
      margin-top:50px;
      margin-bottom:50px;
      width:150px;
      float:left;
    }

    .top-contacts {
      float:left;
      padding:75px 20px;
      color:#000;
    }

    .top-contacts h1 {
      font-size:16px;
      color:#8ac23f;
      font-weight:normal;
      font-style:normal;
      font-family:" Aktiv Grotesk Std ", Helvetica, Arial, sans-serif;
    }

    .top-contacts p {
      font-size:12px;
      font-weight:normal;
      font-style:normal;
      font-family:" Aktiv Grotesk Std ", Helvetica, Arial, sans-serif;
      padding-top:5px;
    }

    .details img {
        float:left;

    }

    .details p {
        float:left;
        padding-top:8px;
        padding-left:5px;
        padding-right:8px;
    }

    /* --- Container configuration HOVER OVER IMAGE ---------------------------------------------------------- */

    .viewport-first {
        border: 3px solid #eee;
        float: left;
        margin: 50px 9px 9px 220px;
        overflow: hidden;
        position: relative;
        width: 200px;
        height: 250px;
        border-radius:8px;
    }


    /* --- Link configuration that contains the image and label ----------------------------- */
    .viewport-first a {
        display: block;
        position: relative;
    }

    .viewport-first a img {
        /*height: 332px;*/
        /*left: -20px;*/
        position: relative;
        /*top: -20px;*/
        /*width: 500px;*/
        width: 200px;
        height: 250px;
    }

    /* --- Label configuration -------------------------------------------------------------- */
    .viewport-first a span {
        display: none;
        font-size: 2.0em;
        font-weight: bold;
        height: 100%;
        padding-top: 120px;
        position: absolute;
        text-align: center;
        text-decoration: none;
        width: 100%;
        z-index: 100;
    }
        .viewport-first a span em {
            display: block;
            font-size: 0.5em;
            font-weight: normal;
            color:#000;

        }


    .viewport {
        border: 3px solid #eee;
        float: left;
        margin: 50px 9px 9px 0;
        overflow: hidden;
        position: relative;
        width: 200px;
        height: 250px;
        border-radius:8px;
    }

    /* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
       class to the last thumbnail in each row to get rid of the margin-right. */
    .no-margin {
        margin-right: 0;
    }

    /* --- Link configuration that contains the image and label ----------------------------- */
    .viewport a {
        display: block;
        position: relative;
    }

    .viewport a img {
        /*height: 332px;*/
        /*left: -20px;*/
        position: relative;
        /*top: -20px;*/
        /*width: 500px;*/
        width: 200px;
        height: 250px;
    }

    /* --- Label configuration -------------------------------------------------------------- */
    .viewport a span {
        display: none;
        font-size: 2.0em;
        font-weight: bold;
        height: 100%;
        padding-top: 120px;
        position: absolute;
        text-align: center;
        text-decoration: none;
        width: 100%;
        z-index: 100;
    }
        .viewport a span em {
            display: block;
            font-size: 0.5em;
            font-weight: normal;
            color:#000;
        }

    /* --- Dark hover background ------------------------------------------------------------ */
    .dark-background {
        background-color: rgba(240, 240, 240, 0.97);
        color: #000;
        /*text-shadow: #111 0px 0px 20px;*/
    }
        .dark-background em {
            color: #000;
        }

    /**
     * You could create multiple hover background classes for different looks depending on the
     * image type. Use your imagination!
     */



    .product {
        /*background:#EDCAA6;*/
        background-image:url(images/paper_texture_picture_169367.jpg);
        height:380px;
    }
    /*
    .product img {
        margin-top:50px;
        width: 200px;
        height: 200px;
        border-radius: 8px;
        margin-right: 5px;
    }

    .product img:first-child {

        margin-left:250px;

    }



    .clear {
      clear:both;
    }

    /*-----CLEARFIX-----*/
    .group:before,.group:after {
      content: "";
      display: table;}.group:after {
      clear: both;}.group {
      clear: both;
      *zoom: 1;}
    /*-------------------------------------*/

在将鼠标悬停在图像上时,我能够实现的是,当您单击图像时,所有四个图像都会变小并在左侧分组,如下图所示。

https://www.dropbox.com/s/xnuve3jl8woxqkn/1.png?dl=0

https://www.dropbox.com/s/78tm69qhwy3p8d6/2.png?dl=0

我无法创建的是以下点击事件后,当4个图像变小并在左侧分组时,在右侧我希望矩形框等于右侧3个图像的大小,我将在其中提供额外的点击的产品类型信息。 除此之外,左侧的4个小图像应响应点击,每次点击后应提供右侧正确产品的适当信息。

2 个答案:

答案 0 :(得分:0)

添加隐藏的div

<div id="hidden_div" class="hidden_div"></div>

带有样式

.hidden_div{display:none;}

使用$("#hidden_div").show();$("#hidden_div").hide();来显示/隐藏div。使用$("#hidden_div").html(desired_content);更改其在单击图像div

上的内容

答案 1 :(得分:0)

根据您现在所拥有的布局,我看到左侧堆叠的4个较小图像的位置具有固定的左边距。您只需为信息面板添加一个(以前隐藏的)绝对定位的div;一定要添加相对于div.product的位置:

&#13;
&#13;
<div class="product" style="position: relative;">
  <div class="infoPanel" style="
    width: 560px;    
    height: 220px;position: absolute;    
    top: 54px;    
    left: 470px;
    background: #fafafa;
    padding: 20px;
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.17);
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.17);
     box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.17);
    border-radius: 3px;
">
    <p>This is the infoPanel</p>
  </div> 
  
  <!-- the rest of your html  -->
  
  </div>
&#13;
&#13;
&#13;