Ramjet: Как заставить элемент появляться и появляться

Итак, я пытаюсь выполнить код для ramjet http://www.rich-harris.co.uk/ramjet/, но я не могу заставить элемент a исчезать при перемещении в b. Я также получаю --Uncaught TypeError: Не могу прочитать свойство «добавить» неопределенного--. Однако элемент a движется. Как я могу заставить a превратиться в b, как показано на странице.Ramjet: Как заставить элемент появляться и появляться

script.js

$(document).ready(function() { 
// set the stage so ramjet copies the right styles... 
b.classList.remove('hidden'); 

ramjet.transform(a, b, { 
    done: function() { 
    // this function is called as soon as the transition completes 
    b.classList.remove('hidden'); 
    } 
}); 

// ...then hide the original elements for the duration of the transition 
a.classList.add('hidden'); 
b.classList.add('hidden'); 
});

index.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script type="text/javascript" src="./ramjet.js"></script> 
    <script type="text/javascript" src="./script.js"></script> 

</head> 

<body> 
    <div class="back"> 
     <div id="a"></div> 
     <div id="b" class="hidden"></div> 
    </div> 
</body> 
</html>

stylesheet.css

.back { 
    float: left; 
    width: 790px; 
    height: 525px;  
    border-radius: 5px; 
    background-color: #BCD2EE 
} 

#a { 
    margin: 200px 10px; 
    margin-right: auto; 
    width: 175px; 
    height: 60px; 
    background-color: #666699; 
    display: inline-block; 
    position: relative; 
    border: 2px solid black; 
} 

#b { 
    margin: 200px 10px; 
    margin-right: auto; 
    width: 175px; 
    height: 60px; 
    background-color: red; 
    display: inline-block; 
    position: relative; 
    border: 2px solid black; 
} 

.hidden { 
    visibility: hidden; 
}

источник

2015-05-07 mc805

здесь сценарий в моей голове тег:

<script type="text/javascript" src="jquery-1.11.1.js"></script> 
<script type="text/javascript" src="ramjet.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
// set the stage so ramjet copies the right styles... 
b.classList.remove('hidden'); 

ramjet.transform(a, b, { 
    done: function() { 
    // this function is called as soon as the transition completes 
    b.classList.remove('hidden'); 
    } 
}); 

// ...then hide the original elements for the duration of the transition 
a.classList.add('hidden'); 
b.classList.add('hidden'); 
}); 
</script>

без изменений в css код работает нормально. div b получил hide и div a приобрел свойство b.

Я думаю, проблема в вашем пути к сценарию, который вы определяете в разделе раздела docs. проверьте свой путь.

источник

2015-05-07 13:24:29 vitally

Убедитесь, что ваш путь к файлам ramjet.js и script.js верен. потому что ваш путь выглядит следующим образом: . почему вы пишете ./ перед ним. поместите весь ваш файл в ту же папку, а затем проверьте. он будет работать. – vitally

Если работает ramjet и работает jquery, это должно означать, что он правильно указывает .. но я пошел и изменил его, чтобы проверить, но он все равно делает то же самое. – mc805

проверить свой путь к сценарию bro – vitally

that's my div ' a '

перед изменением моего Див а, выглядит следующим образом. после того, как DOM получит нагрузки, он поворачивается и приобретает свойство div b как красное: after DOM load

источник

2015-05-07 14:11:24 vitally

Каков ваш точный html и ваш точный script.js? – mc805

Ramjet: Как заставить элемент появляться и появляться

ответ

Смежные вопросы