Javascript Jquery动画/fadeIn/fadeOut_Javascript_Jquery_Html_Css_Animation

Javascript Jquery动画/fadeIn/fadeOut

javascript jquery html css animation

Javascript Jquery动画/fadeIn/fadeOut,javascript,jquery,html,css,animation,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">

我是一个在前端完成第一步的新手。我花了一天的大部分时间研究一些动画功能，但未能完成，以下是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;}
    /*-------------------------------------*/

在图像上悬停时，文本会出现，当您单击图像时，所有四个图像都会变小并在左侧分组，如下图所示

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

添加隐藏div

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

使用$hidden_div.show$隐藏的，隐藏的；要显示/隐藏分区，请使用$hidden_div.htmldesired_内容；要使用现在的布局在单击图像divs时更改其内容，我看到左侧堆叠的4个较小图像以固定的左边框定位。您只需为信息面板添加一个先前隐藏的绝对定位div；确保添加相对于您的部门产品的位置：

这是infoPanel

感谢您的帮助，我认为这是解决方案的一半，我添加了不透明度0，因为InfoPanel div在图像下方可见，通过onclick事件，我将不透明度从0更改为1。

.hidden_div{display:none;}