Форум

m777 · #1 (**permalink**) 12.04.2014, 08:00

Необходимо на jQuery или CSS3 сделать, чтобы блок сворачивался, подходит эффект blind, но только когда сворачивается влево, он как бы затирает слой,а не сдвигает его. А если сделать в правую сторону, то он получается его сдвигает. Как сделать, чтобы и в правую сторону затирало?
Вот тут собственно пример эффекта данного http://jsfiddle.net/wU2DJ/2/

рони · #2 (**permalink**) 12.04.2014, 15:56

m777,

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=us-ascii">

  <title>- jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'>
</script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <script type='text/javascript' src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
  <style type='text/css'>
 body{
    background-color:  #DAA520;
padding: 0px;
     margin: 0px;
  }
#toggle {
    width: 200px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script>
$(window).load(function(){
  $('#toggle').css(
        {"position" : "absolute",
         "top":'0px', "left": $(window).width()-$('#toggle').width()+"px"});

  $(  document ).click(function() {
  $( "#toggle" ).toggle( "blind", {direction: "right"}, 1000);
  });
  });
  </script>
</head>

<body>
  <p>Click on the document to toggle the box.</p>

  <div id="toggle">
    asdasdasdasdasd
  </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript