Форум

Сершей · #1 (**permalink**) 07.07.2013, 14:05

Всем привет. Написал простенький код, который скрывает и открывает блоки по нажатию кнопки. ВСе бы ничего, но есть одно НО. У меня, почему-то, не хотят работать такие функции, как fadeOut, fadeIn, fadeTo. Пришлось заменять их на Show, Hide, что не есть хорошо. Хочется плавной анимации. Что делать, в чем ошибка?
Вот код:

$(document).ready(function()
{
 
    $('div#mblock2, div#mblock3, div.mbut1').hide();
        
 
        $('div.mbut1').click(function()
        {
            $('div#mblock1, div.mbut2,  div.mbut3').show();
            $('div#mblock2, div#mblock3, div.mbut1').fadeIn(2000);          
        });
        
        
        $('div.mbut2').click(function()
        {
            $('div#mblock2, div.mbut1,  div.mbut3').show();
            $('div#mblock1, div#mblock3, div.mbut2').fadeIn(2000);              
        });     
        
        
        $('div.mbut3').click(function()
        {
            $('div#mblock3, div.mbut1,  div.mbut2').show();
            $('div#mblock1, div#mblock2, div.mbut3').fadeIn(2000);              
        });
 
 
});

рони · #2 (**permalink**) 07.07.2013, 19:41

Сершей,
нерабочий пример с html разместите здесь.

Сершей · #3 (**permalink**) 07.07.2013, 20:25

Это и есть нерабочий пример скрипта. Не понимаю, что значит пример с html? Сайт делаю локально на денвере, так что скинуть не могу(
Вот кусок код html, с которым связан скрипт:

<div id="slidemenu">
		
			<div class="mbut1"></div> 
			<div class="mbut2"></div> 
			<div class="mbut3"></div> 
			
			<div id="mblock1">
			<jdoc:include type="modules" name="block1" />
			</div> 
			<div id="mblock2">
			<jdoc:include type="modules" name="block2" />
			</div> 
			<div id="mblock3">
			<jdoc:include type="modules" name="block3" />
			</div> 
		
		
		
			<jdoc:include type="modules" name="user4" />
		</div>

Есть ли какие-нибудь альтернативные функции fadeOut fadeIn??

danik.js · #4 (**permalink**) 07.07.2013, 20:48

Какая версия jQuery? И что значит "не хотят работать"? Они объявили голодовку? Или устраивают митинг? Или просто капризничают? Можете пояснить?

рони · #5 (**permalink**) 07.07.2013, 20:52

Сершей, вот что требовалось -- а сейчас опишите что не так работает но какбы хотелось чтоб работало - алгоритм

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div#mblock1, div#mblock2, div#mblock3{
     background-color: #FFD700;
   }
   div.mbut1, div.mbut2, div.mbut3{
     background-color: #228B22;
   }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
   $(document).ready(function()
{
  $('div#mblock2, div#mblock3, div.mbut1').fadeOut();
        $('div.mbut1').click(function()
        {
            $('div#mblock1, div.mbut2,  div.mbut3').fadeIn(2000);
            $('div#mblock2, div#mblock3, div.mbut1').fadeOut(2000);
        });


        $('div.mbut2').click(function()
        {
           $('div#mblock2, div.mbut1, div.mbut3').fadeIn(2000);
           $('div#mblock1, div#mblock3, div.mbut2' ).fadeOut(2000);

        });


        $('div.mbut3').click(function()
        {
            $('div#mblock3, div.mbut1,  div.mbut2').fadeIn(2000);
            $('div#mblock1, div#mblock2, div.mbut3').fadeOut(2000);
        });

});

  </script>
</head>

<body>
 <div id="slidemenu">
			<div class="mbut1">1</div>
			<div class="mbut2">2</div>
			<div class="mbut3">3</div>

			<div id="mblock1">1111</div>
			<div id="mblock2">2222</div>
			<div id="mblock3">3333</div>
		</div>

</body>

</html>

Сершей · #6 (**permalink**) 07.07.2013, 21:13

Итак, во вложении есть наглядная картинка. Требуется, чтобы при нажатии на среднюю синюю кнопку все блоки исчезали и появлялся средний блок, на правую - все блоки исчезают, правый - появляется. Всё это должно происходить плавно, не резко.
jquery - подключал вот эту версию: jquery-1.10.2.min.js
Сам скрипт тоже подключал к файлу index.php вот таким образом:

<script type="text/javascript" src="<?php echo $path ?>/javascript/menu.js"></script>

Не хотят работать - означает, что как будто там fadeIn и fadeOut и нету, то есть при нажатии на кнопку ничего не происходит.

Вот полный файл index.php, если требуется (увы, с нуля делал его не я, поэтому там пока что находится много чего лишнего):

<?php
/**
 * @version                $Id: index.php 21518 2011-06-10 21:38:12Z chdemko $
 * @package                Joomla.Site
 * @subpackage  
 * @copyright        Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license                GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access.
defined('_JEXEC') or die;
$path = $this->baseurl.'/templates/'.$this->template;
error_reporting( E_ERROR );

JHtml::_('behavior.framework', true);

// get params
$logo               = $this->params->get('logo');
$app                = JFactory::getApplication();
$doc        = JFactory::getDocument();
$templateparams     = $app->getTemplate(true)->params;

?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
 <?php
  $itemid = JRequest::getVar('Itemid');
  $menu = &JSite::getMenu();
  $active = $menu->getItem($itemid);
  $params = $menu->getParams( $active->id );
  $pageclass = $params->get( 'pageclass_sfx' );
?><head>

<script type="text/javascript" src="http://kr-pc.ru/test/jquery-1.3.2.js"></script>

<jdoc:include type="head" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="<?php echo $path ?>/css/position.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/layout.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/general.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/personal.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/style.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/grid.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/print.css" type="text/css" media="print" />
<script type="text/javascript" src="<?php echo $path ?>/javascript/modernizr-1.6.min.js"></script>

<?php if (!$this->countModules('slider')): ?>
<script type="text/javascript" src="<?php echo $path ?>/javascript/jquery.js"></script>
<?php endif;?>
<script type='text/javascript' src='<?php echo $path ?>/javascript/mosaic.1.0.1.min.js'></script> 
<script type='text/javascript' src='<?php echo $path ?>/javascript/jquery.easing.js'></script> 

  <script type="text/javascript" src="<?php echo $path ?>/javascript/Chaparral_Pro_400.font.js"></script>
  <script type="text/javascript" src="<?php echo $path ?>/javascript/Chaparral_Pro_700.font.js"></script>

   <script type="text/javascript" src="<?php echo $path ?>/javascript/jquery.faded.js"></script> 
     <script type="text/javascript" src="<?php echo $path ?>/javascript/superfish.js"></script> 
   <script type="text/javascript" src="<?php echo $path ?>/javascript/hoverIntent.js"></script> 
      <script type="text/javascript" src="<?php echo $path ?>/javascript/jquery-1.10.2.min.js"></script> 
	  <script type="text/javascript" src="<?php echo $path ?>/javascript/menu.js"></script>
		<script type="text/javascript" src="<?php echo $path ?>/javascript/blocks.js"></script> 

</head>

<body class=" <?php echo $pageclass; ?>">
<div id="all">
<div id="header">
<div id="headermenu"><jdoc:include type="modules" name="user7" style="xhtml"  /></div>
</div>
<div id="navig" class="default">
	<div id="navigmenu">
		<div class="navig">
		<nav><jdoc:include type="modules" name="user1" /></nav>  
		<jdoc:include type="modules" name="user2" /> 
		</div> 
	</div> 
</div>

<?if (strpos($_SERVER['REQUEST_URI'], '/index.php')!== false){?>
<div id="noslide"</div>
<?}else{?>

<div id="slide">
	<div id="slidesvet">
		<div id="slidemenu">
		
			<div class="mbut1"></div> 
			<div class="mbut2"></div> 
			<div class="mbut3"></div> 
			
			<div id="mblock1">
			<jdoc:include type="modules" name="block1" />
			</div> 
			<div id="mblock2">
			<jdoc:include type="modules" name="block2" />
			</div> 
			<div id="mblock3">
			<jdoc:include type="modules" name="block3" />
			</div> 
			<jdoc:include type="modules" name="user4" />
		</div> 

	</div>
</div>

<?}?>

<div id="all2">          
  <div id="content" >
	<?php if($this->countModules('slider')) : ?>
    <div id="message">
   <jdoc:include type="modules" name="slider" />
    </div>
    <?php endif; ?> 

    <?php if($this->countModules('top')) : ?>
    <div id="message">
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
    <?php endif; ?>
	
    <div class="padding_content">

        <jdoc:include type="message" />
      <div class="wrapper_overflow">
      
      <?php if($this->countModules('left')) : ?>
        <div id="sidebar-1" >
          
          <jdoc:include type="modules" name="left" style="xhtml" />
        </div>
        <?php endif; ?>
        <?php if($this->countModules('right')) : ?>
        <div id="sidebar-2" >
          <jdoc:include type="modules" name="right" style="xhtml" /></div>
        <?php endif; ?>
        <div id="maincolbck">
          <div id="maincolumn" >
            <jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
            <jdoc:include type="component" />
          </div>
      </div>
      </div>

    </div>
  </div>
  <?php if($this->countModules('user3')) : ?>
<div class="bottom_row">
<div class="center">
     <jdoc:include type="modules" name="user3" style="xhtml"  />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules('user5')) : ?>
<div class="bottom_row2">
<div class="center">
     <jdoc:include type="modules" name="user5" style="xhtml"  />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules('user8')) : ?>
<div class="bottom_row3">
<div class="center">
     <jdoc:include type="modules" name="user8" style="xhtml"  />
</div>
</div>
<?php endif; ?>

<div class="push"></div>
 
</div>

<div id="footer-outer">
  <div id="footer-sub">
    <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="user6" style="xhtml"  />
      
    </div>
        </div>
    <!-- end footer -->     
  </div>
</div>

<jdoc:include type="modules" name="debug" />

</body>
</html>

danik.js · #7 (**permalink**) 07.07.2013, 21:31

Что в консоли ошибок браузера (она есть в любом браузере)?

рони · #8 (**permalink**) 07.07.2013, 21:32

Сершей,
код вверху в 5 посте так работает как выхотели или нет?

Сершей · #9 (**permalink**) 07.07.2013, 21:50

Да, всё работает! Спасибо огромное! Не знаю в чем дело было, но теперь, когда я почистил немного файл index.php, всё заработало. Видимо скрипт с чем-то конфликтовал.

Форум

Справочник

Discord чат

Курсы javascript